目前正在构建静态登录/信息页面。表格将询问姓名，电子邮件，电话号码，性别和生日。我使用ScrollView来包装两个容器。第一个容器有3个TextInputs和单选按钮。第二个容器有3个选择器供用户输入他们的生日。在我尝试输入信息之前，一切看起来都相对较好。当我单击TextInputs时，屏幕键盘会压缩/扭曲其余组件，使得无法读取正在输入的内容并使页面的其余部分看起来非常难看。
我认为发生这种情况的原因是由于ScrollView试图将所有组件保留在屏幕上。我如何使它，以便在使用TextInput时，只有键盘和特定的TextInput可见。
这是代码：
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在scrollTo()上发射ScrollView（通过那些坐标）...
或使用像这样的图书馆：https://github.com/APSL/react-native-keyboard-aware-scroll-view