我有一个文本输入,名为电子邮件或用户名,当我点击它时,它不显示我键入的值,我认为这是因为屏幕大小,无论如何,我可以调整文本输入,以便当我点击它时,全文输入显示,我可以看到我键入的值。它下面的其他文本输入显示了,但它没有显示,如果我将它包装在滚动视图中,请提供任何帮助将很好,谢谢。
这是页面
当我单击电子邮件或用户名时出现
在滚动视图中包装视图的将显示此
MY CODE
<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>
发布于 2018-08-22 09:30:06
这对我很有效:
使用React Native中的Keyboard
API在键盘上设置侦听器。
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
根据键盘的显示与否,使用状态变量将ScrollView
(包装您的内容)的scrollEnabled
属性设置为true
或false
。因此,当键盘显示时,滚动将被启用。
在内容的底部添加一个带有一些height
的条件View
,当显示键盘时,它是活动的,这样您就可以滚动了。
记住这一点:
componentWillUnmount () {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
发布于 2018-08-22 02:07:09
将整个代码放在ScrollView中,并对视图使用固定位置。试试看。
发布于 2018-08-22 06:45:49
在第一个和最后一个textInput.try中没有onchangetext()事件将其添加到您的代码中。
constructor(props) {
super(props);
this.state = { email:'',text:'',password:'' };
}
...
<TextInput
onChangeText={(email) => this.setState({email})}
value={this.state.email}
/>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(password) => this.setState({password})}
value={this.state.password}
/>
我希望这对你有帮助
https://stackoverflow.com/questions/51954288
复制相似问题