当前构建静态登录/信息页面。表格将要求提供名称，电子邮件，电话号码，性别和生日。我使用ScrollView将两个容器包裹起来。第一个容器具有3个文本输入和无线电按钮。第二个容器有3个选择器供用户进入生日。在我尝试输入信息之前，一切看起来都相对不错。一旦单击文本输入，屏幕上的键盘紧凑/扭曲了其余的组件，就无法读取所输入内容并使页面的其余部分看起来非常难看。
我认为发生这种情况的原因是由于滚动浏览试图将所有组件保存在屏幕上。我如何做到这一点，以便在使用文本输入时，只能看到键盘和特定的文本输入。
这是代码：
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button,
AppRegistry,
Picker,
TextInput,
ScrollView,
Alert,
} from 'react-native';
import RadioForm, {RadioButton, RadioButtonInput,
RadioButtonLabel} from 'react-native-simple-radio-button';
let radio_props = [
{label: 'male', value: "male" },
{label: 'female', value: "female" }
];
export default class SimpleComponentOne extends Component {
constructor(radio_props){
super(radio_props);
this.state = {
month: 'Month',
day: 'day',
year: 'year',
gender: 'male',
check: true
}
}
onValueChangeMonth(key, value){
this.setState({month: value})
}
onValueChangeDay(key, value) {
this.setState({day: value})
}
onValueChangeYear(key, value) {
this.setState({year: value})
}
onValueChangeGender(key, value) {
this.setState({gender: value})
}
_createAlert(){
Alert.alert("well done")
}
checkBoxTest(){
//Alert.alert("this is working")
this.setState({
check:!this.state.check
})
Alert.alert("The value is now " + !this.state.check)
}
render() {
return (
<ScrollView contentContainerStyle={styles.mainContainer}>
<Text>Enter your info below</Text>
<View style={styles.container1}
behavior="padding"
>
<TextInput
placeholder="Please enter your name"
style={styles.name}
/>
<TextInput
placeholder="Please enter your phone number"
style={styles.phoneNumber}
/>
<TextInput
placeholder="Please enter your email"
style={styles.email}
/>
<View style={styles.gender}>
<Text style={styles.genderText}>Please choose gender
</Text>
<RadioForm
style={styles.genderSelect}
radio_props={radio_props}
initial={-1}
// formHorizontal={true}
onPress={(value) => {this.setState({value:value})}}
buttonSize={5}
buttonColor='black'
buttonColorLabel='black'
labelColor='black'
// labelHorizontal={false}
labelStyle={{fontSize:12}}
>
</RadioForm>
</View>
</View>
<Text>Please enter your birthday
</Text>
<View style={styles.container2}>
<View style={styles.month}>
<Text>Month: </Text>
<Picker
selectedValue={this.state.month}
onValueChange={this.onValueChangeMonth.bind(this,'month')}
prompt="Pick your month"
mode="dropdown"
>
<item label="January" value="January"/>
<item label="Febuary" value="Febuary"/>
<item label="March" value="March"/>
<item label="April" value="April"/>
<item label="May" value="May"/>
<item label="June" value="June"/>
<item label="July" value="July"/>
<item label="August" value="August"/>
<item label="September" value="September"/>
<item label="October" value="October"/>
<item label="November" value="November"/>
<item label="December" value="December"/>
</Picker>
</View>
<View style={styles.day}>
<Text>Day: </Text>
<Picker
selectedValue={this.state.day}
onValueChange={this.onValueChangeDay.bind(this, 'day')}
prompt="Pick the day"
mode='dropdown'
>
<item label="1" value="1"/>
<item label="2" value="2"/>
<item label="3" value="3"/>
<item label="4" value="4"/>
<item label="5" value="5"/>
<item label="6" value="6"/>
<item label="7" value="7"/>
<item label="8" value="8"/>
<item label="9" value="9"/>
<item label="10" value="10"/>
<item label="11" value="11"/>
<item label="12" value="12"/>
<item label="13" value="13"/>
<item label="14" value="14"/>
<item label="15" value="15"/>
<item label="16" value="16"/>
<item label="17" value="17"/>
<item label="18" value="18"/>
<item label="19" value="19"/>
<item label="20" value="20"/>
<item label="21" value="21"/>
</Picker>
</View>
<View style={styles.year}>
<Text>Year:</Text>
<Picker
selectedValue={this.state.year}
onValueChange={this.onValueChangeYear.bind(this, 'year')}
mode='dropdown'
prompt='Please pick the year you were born'
>
<item label="2000" value="2000"/>
<item label="1999" value="1999"/>
<item label="1998" value="1998"/>
<item label="1997" value="1997"/>
<item label="1996" value="1996"/>
<item label="1995" value="1995"/>
<item label="1994" value="1994"/>
</Picker>
</View>
</View>
<Button
title="Press to submit"
color="#841584"
style={styles.button}
onPress={this._createAlert}
>
</Button>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
mainContainer:{
flex: 1,
flexDirection: 'column',
// backgroundColor: 'yellow'
},
container1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
// backgroundColor: 'green'
paddingBottom: 20,
},
container2:{
flex: 1,
flexDirection: 'row',
// backgroundColor: 'lightblue',
width: 100+'%',
justifyContent: 'flex-end',
},
email: {
width: 100+"%",
flex: 1,
// backgroundColor: 'yellow'
},
name: {
width: 100+'%',
// backgroundColor: 'red',
flex:1,
},
gender:{
flex:1,
// backgroundColor: 'blue',
justifyContent: 'center',
width: 100+'%',
paddingBottom:10
},
genderText:{
paddingBottom: 5,
paddingTop: 10,
},
genderSelect:{
alignItems: 'flex-start',
justifyContent: 'flex-end'
},
phoneNumber: {
width: 100+"%",
// backgroundColor:'purple'
},
month:{
flex: 1
},
day: {
flex: 1,
},
year: {
flex: 1,
},
button:{
position: 'absolute',
bottom:10,
},
});
您要么需要使用onLayout的组合来获取TextInput的坐标，然后使用onFocus在ScrollView上使用scrollTo()（通过这些坐标）...
或使用这样的库：https：//github.com/apsl/reaeact-native-keyboard-aware-aware-scroll-view