react-native - 在 React Native 中聚焦时如何将 TextInput 居中?
问题描述
我有一个包含 3 个TextInput
组件的页面。我遇到的问题是,当我点击它们插入实际文本时,前两个即使消失了,它们也是焦点所在。所以我想集中注意力TextInput
。
<View style={styles.container}>
<View style={styles.header1}>
<Text style={styles.title}>New Note</Text>
</View>
<View style={styles.headerDesign}>
</View>
<View style={styles.header2}>
</View>
<View style= {styles.mainPage}>
<View style={styles.noteBody}>
<TextInput
style = {styles.subject}
placeholder='Raport Number/Note Indentifier'
onChangeText={(noteTitle)=> this.setState({noteTitle})}
value={this.state.noteTitle}
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
<TextInput
style = {styles.calltype}
multiline = {true}
numberOfLines = {5}
placeholder='Call Type/Other Information'
onChangeText={(callType)=> this.setState({callType})}
value={this.state.callType}
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
<TextInput
multiline = {true}
numberOfLines = {9}
style={styles.textInput}
placeholder='Write your note here'
onChangeText={(noteText)=> this.setState({noteText})}
value={this.state.noteText}
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
</View>
<TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
<Text style={styles.addButtonText}>SAVE</Text>
</TouchableOpacity>
</View>
</View>
这是StyleSheet
:
const styles = StyleSheet.create({
container: {
flex: 1,
},
mainPage:{
flex: 2,
alignItems: 'center',
justifyContent:'center',
},
header1:{
backgroundColor: '#000',
alignItems: 'center',
height: 40,
justifyContent: 'center',
},
title:{
color: '#fff',
fontSize: 20,
},
header2:{
backgroundColor: '#000',
alignItems: 'center',
height: 40,
justifyContent: 'center',
},
headerDesign:{
backgroundColor: '#0000FF',
alignItems: 'center',
height: 20,
justifyContent: 'center',
},
noteBody:{
flex: 2,
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
zIndex: 10,
alignItems: 'center',
marginBottom: 100,
},
textInput: {
alignSelf: 'stretch',
textAlignVertical: 'top',
backgroundColor: '#fff',
color: '#000',
padding: 20,
borderTopWidth:1,
borderTopColor: '#000',
borderBottomWidth:1,
borderBottomColor: '#000',
},
addButton: {
position: 'absolute',
zIndex: 11,
bottom: 20,
alignItems: 'center',
justifyContent: 'center',
width: 200,
backgroundColor: '#0000FF',
height: 40,
elevation: 8
},
addButtonText: {
color: '#fff',
fontSize: 20,
},
subject:{
alignSelf: 'stretch',
textAlignVertical: 'top',
backgroundColor: '#fff',
padding: 20,
borderTopWidth:1,
borderTopColor: '#000',
borderBottomWidth:1,
borderBottomColor: '#000',
},
calltype:{
alignSelf: 'stretch',
textAlignVertical: 'top',
backgroundColor: '#fff',
padding: 20,
borderBottomWidth:1,
borderBottomColor: '#000',
}
});
解决方案
您不需要为每个文本输入创建一个绝对位置。为每个 TextInput 使用具有一定高度和宽度的 flex 父级,或者如果您确实想使用绝对位置。使用所有属性 top
, bottom
, right
,left
推荐阅读
- angular - 如何在@ngrx/data 中对 EntityCollectionServiceBase 进行单元测试?
- c# - 如何在 VS CODE 中使用“dotnet run”命令运行当前打开的文件?
- python - 朴素贝叶斯 MultinomialNB ValueError:维度不匹配
- azure - 流量管理器 Azure 端点公共 IP 地址
- angular - HttpInterceptor 未调用全局错误处理程序
- python - 列表元素的枚举python
- android - Firebase ML Kit 人脸检测,检索实例 ID 失败
- c# - C# 正则表达式返回重复的组
- asp.net-mvc - SQL Server 视图未在 MVC 视图中更新
- bash - 使用 Helm 图表在部署清单中序列化 Pod 的创建