Question

我有一个包含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',
}

});

Answer 1

您不需要为每个文本输入设置绝对位置。对于每个TextInput使用具有一定高度和宽度的flex父级，或者如果您确实要使用绝对位置。使用所有属性top，bottom，right，left

如何在React Native中聚焦时将TextInput居中？

1 个答案: