React Native:当将TextInput放入View中时,它将消失
React Native: TextInput disappears when put into View
目前我正在一本书的帮助下学习React Native,书中解释了如何构建一个待办事项应用程序。但是,由于这个错误/错误,我无法继续。这是在IOS中发生的,不确定这是否也发生在Android上,因为我还没有设置我的Android模拟器只是jet。
我的<View>
容器有两个<TextInputs>
,工作正常。当我将两个输入都包装到视图中时,它们只是"消失"。
这是我的组件NoteScreen.js:
import React, {
Component,
StyleSheet,
TextInput,
View
} from 'react-native';
export default class NoteScreen extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
ref="title"
autoFocus={true}
autoCapitalize="sentences"
placeholder="Untitled"
style={styles.title}
onEndEditing={(text) => {this.refs.body.focus()}}
/>
</View>
<View style={styles.inputContainer}>
<TextInput
ref="body"
multiline={true}
placeholder="Start typing"
style={styles.body}
textAlignVertical="top"
underlineColorAndroid="transparent"
/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 64
},
textInput: {
color: '#ffffff',
flex: 1,
width: 60,
height: 60,
fontSize: 16
},
inputContainer: {
borderBottomColor: '#9E7CE3',
borderBottomWidth: 1,
flex: 1,
flexDirection: 'row',
marginBottom: 10
},
title: {
fontFamily: 'Overpass-Bold',
height: 40
},
body: {
fontFamily: 'Overpass-Bold',
flex: 1
}
});
我做了一些研究,发现了一些奇怪的事情;
- 我的两个输入都有宽度和高度
- 如果输入没有应用任何样式,它们也会消失
- 这只发生在文本输入时,普通文本只是渲染
一些见解会很好,我认为这是一个bug,或者我只是忽略了一些东西。。
我(在android上)尝试了您的示例,使用您提供的确切代码,屏幕完全是空的。如果在文本输入上没有样式,它们就不会显示,并且您已经在styles.title和styles.body中为TextInput组件->设置了style.title和styles.body,您没有(同时)宽度和高度。所以你能做的是:
- 将
width
添加到您的标题和正文样式中
或
- 将样式添加到数组中的文本输入,并将两种样式应用于textInput和标题/正文,如下所示:
style={[styles.textInput, styles.title]}
和style={[styles.textInput, styles.body]}
以下是我给你的两个建议的工作代码:
import React, {
AppRegistry,
Component,
StyleSheet,
TextInput,
View
} from 'react-native';
export default class NoteScreen extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
ref="title"
autoFocus={true}
autoCapitalize="sentences"
placeholder="Untitled"
style={styles.title}
onEndEditing={(text) => {this.refs.body.focus()}}
/>
</View>
<View style={styles.inputContainer}>
<TextInput
ref="body"
multiline={true}
placeholder="Start typing"
style={[styles.textInput, styles.body]}
textAlignVertical="top"
underlineColorAndroid="transparent"
/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 64
},
textInput: {
color: '#ffffff',
flex: 1,
width: 60,
height: 60,
fontSize: 16
},
inputContainer: {
borderBottomColor: '#9E7CE3',
borderBottomWidth: 1,
flex: 1,
flexDirection: 'row',
marginBottom: 10
},
title: {
fontFamily: 'Overpass-Bold',
height: 40,
width: 40
},
body: {
fontFamily: 'Overpass-Bold',
flex: 1
}
});
我相信我们读的是同一本书,因为我遇到了同样的问题。
我通过删除容器样式中的 以下是我的代码:alignItems: 'center'
并将flex: 1
添加到输入容器import React, { StyleSheet, Text, TextInput, View } from "react-native";
import dismissKeyboard from "dismissKeyboard";
export default class NoteScreen extends React.Component {
render() {
handleTitleEditingEnd = (text) => { this.refs.body.focus(); };
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
ref="title"
placeholder="Untitled"
style={[styles.textInput, styles.title]}
onEndEditing={handleTitleEditingEnd}
returnKeyType="next"
/>
</View>
<View style={styles.inputContainer}>
<TextInput
ref="body"
multiline={true}
placeholder="Start typing"
style={[styles.textInput, styles.body]}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
// alignItems: "center",
marginTop: 64
},
inputContainer: {
borderBottomColor: "#9E7CE3",
borderBottomWidth: 1,
flexDirection: "row",
marginBottom: 10,
flex: 1,
},
textInput: {
flex: 1,
fontSize: 16,
},
title: {
height: 40,
},
body: {
flex: 1,
}
});
如果<Text>
在<View>
中没有高度,请尝试从容器中移除flex : 1
。
我用下面的代码解决了这个问题:
import React, {
StyleSheet,
TextInput,
View
} from 'react-native';
export default class NoteScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput ref="title" autoFocus={true} autoCapitalize="sentences" placeholder="Untitled" style={[styles.textInput, styles.title]} onEndEditing={(text) => {this.refs.body.focus()} }/>
</View>
<View style={styles.inputContainer}>
<TextInput ref="body" multiline={true} placeholder="Start typing" style={[styles.textInput, styles.body]}/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
marginTop: 64
},
title: {
height: 40
},
body: {
height: 160,
flex: 1
},
inputContainer: {
borderBottomColor: '#9E7CE3',
borderBottomWidth: 1,
flexDirection: 'row',
marginBottom: 10
},
textInput: {
flex: 1,
fontSize: 16,
width: 300,
}
});
- 当查询不在displayField中时,引导Ajax Typeahead不显示结果
- 使用createContainer将Meteor数据获取到React Native中时出现问题
- 当多个图像在源文件中时,如何从源文件中选择特定的图像
- 当屏幕键盘出现在手机中时,窗体会隐藏起来
- '填隙'当所述项目不在容器中时,将一些项目与引导程序网格对齐
- 在将javascript附加到我的html中时遇到问题
- SVG在转换时消失在firefox中
- React Native:当将TextInput放入View中时,它将消失
- 使用D3.js生成的SVG图形在Safari中滚动时消失
- JavaScript XY图表在JSF素数中的页面加载时消失
- 使用 JS/jQuery 将行动态添加到表中时行消失
- 剑道网格中的数据在排序时消失
- 背景图像在悬停/鼠标悬停时消失,菜单在IE中不起作用
- 输入框和文本在IE8中退格/删除时消失
- 谷歌图表在rails应用程序中更改页面时消失
- 在IE 8中选择鼠标悬停时消失的选项
- 在ASP.NET中,RSS提要在回发时消失
- 在IE10中,文本区占位符不会在焦点/输入时消失
- 响应中的XML在刷新时消失
- WordPress中的JavaScript下拉菜单在我尝试将鼠标悬停在它上面时消失了