当我点击它时，我有一个名为电子邮件或用户名的文本输入，它不显示我键入的值，我认为这是因为屏幕尺寸，无论如何我可以调整 Textinput 以便当我单击它，全文输入显示，我可以看到我输入的值。 它下方的其他文本输入显示，但未显示，我应该将其包装在 ScrollView 中，请提供任何帮助，谢谢。
这是页面
当我点击电子邮件或用户名时
将 View 包裹在 ScrollView 中会带来这种情况
我的代码
<View style={{
height: 42, width: 72,
backgroundColor: '#EFB879', marginTop: '15.15%',
alignSelf: 'center'
}}>
<Text style={{
fontFamily: 'mont-bold',
fontSize: 34,
color: '#fff'
}}>
sẹlẹ
</Text>
</View>
<View style={{
width: '83.33%',
height: this.state.visible? 240 : 180,
backgroundColor: '#fff',
position: 'absolute',
bottom: 0,
alignSelf: 'center',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
}}>
<View style={{
width: '100%',
height: 60,
backgroundColor: '#fff',
borderBottomWidth: 0.7,
borderColor: '#d9d8d8',
borderTopRightRadius: 6,
borderTopLeftRadius: 6,
}}>
<TextInput placeholder="Email or mobile number"
placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
placeholderTextColor="#615D5D"
underlineColorAndroid={'transparent'}
style={{
alignSelf: 'center',
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
width: '85%',
paddingLeft: 0,
padding: 4,
backgroundColor: '#fff',
fontSize: 14, fontFamily: 'mont', color: '#615D5D',
}}/>
</View>
<View style={{
width: '100%',
height: 60,
backgroundColor: '#fff',
borderBottomWidth: 0.7,
borderColor: '#d9d8d8',
}}>
<TextInput placeholder={picked}
value={this.state.text}
onChangeText={(text) => this.handleChange(text)}
onFocus={() => this.setState({visible: true})}
onBlur={() => this.setState({visible: false})}
placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
placeholderTextColor="#615D5D"
underlineColorAndroid={'transparent'}
style={{
alignSelf: 'center',
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
width: '85%',
paddingLeft: 0,
padding: 4,
backgroundColor: '#fff',
fontSize: 14, fontFamily: 'mont', color: '#615D5D',
}}
contextMenuHidden={true}/>
</View>
{this.state.visible ? <View style={{
justifyContent: 'flex-end',
height: 200,
width: '100%',
}}>
<Text style={styles.textHead}>
Select your Institute
</Text>
{view}
</View> : <View hide={true} style={{
width: '100%',
height: 60,
backgroundColor: '#fff',
justifyContent: 'center'
}}>
<TextInput placeholder="Password"
placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
placeholderTextColor="#615D5D"
underlineColorAndroid={'transparent'}
secureTextEntry={true}
style={{
alignSelf: 'center',
flex: 1,
paddingTop: 10,
paddingRight: 25,
paddingBottom: 10,
width: '85%',
paddingLeft: 0,
padding: 4,
backgroundColor: '#fff',
fontSize: 14, fontFamily: 'mont', color: '#615D5D',
}}/><View style={{
width: 18, height: 11,
position: 'absolute', right: 25
}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../eye.png')}/>
</View>
</View>}
</View>
</View>
<View style={{
width: '83.36%',
height: 60,
backgroundColor: '#EFB879',
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
borderBottomRightRadius: 6,
borderBottomLeftRadius: 6,
}}>
<Text style={{
fontFamily: 'mont-semi',
fontSize: 16,
color: '#fff'
}}>
SIGN UP
</Text>
</View>
<View
style={{
height: 0,
width: 120,
borderBottomWidth: 1.2,
borderColor: '#d9d8d8',
alignSelf: 'center',
marginTop: '50%'
}}>
</View>
<View style={{width: '100%',
height: 2,flexDirection: 'row',
// alignSelf: 'center',
justifyContent: 'center',
marginTop: '5%'}}>
<Text style={{
color: '#615D5D',
fontFamily: 'mont-medium',
fontSize: 14,
alignSelf: 'center',
}}>
Already have an account? </Text>
<TouchableNativeFeedback
onPressIn={() => this.setState({pressed: !this.state.pressed})}
onPressOut={() => this.setState({pressed: !this.state.pressed})}
onPress={this.onP.bind(this)}>
<Text
style={{
color: '#EFB779',
fontFamily: 'mont-medium',
fontSize: this.state.pressed? 16: 14,
alignSelf: 'center',}}>
SIGN IN
</Text>
</TouchableNativeFeedback>
</View>
</View>
最佳答案
这对我有用:
使用 React Native 的 Keyboard API 在键盘上设置监听器。
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
使用状态变量将 ScrollView(包装您的内容)的 scrollEnabled 属性设置为 true 或 false 根据键盘是否显示。因此，当显示键盘时，将启用滚动。
在您的内容底部添加一个条件 View，它具有一些 height，当显示键盘时它是 Activity 的，因此您将能够滚动。
记住这一点:
componentWillUnmount () {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
关于android - TextInput 未显示在焦点上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51954288/