Создание активной формы входа в систему, хорошо выглядит, пока пользователь не попытается использовать клавиатуру. Как сохранить компоненты при уплотнении на экране?

91
12

В настоящее время создается статическая страница входа/информации. Форма будет запрашивать имя, адрес электронной почты, номер телефона, пол и день рождения. Я использовал ScrollView для обтекания обоих контейнеров. Первый контейнер имеет 3 TextInputs и переключатели. Второй контейнер имеет 3 Pickers, чтобы пользователь мог ввести свой день рождения. Все выглядит относительно хорошо, пока я не попытаюсь ввести информацию. Как только я нажимаю на TextInputs, экранная клавиатура сжимает/искажает остальные компоненты, что делает невозможным чтение введенных данных, а остальная часть страницы выглядит довольно неприглядно.

Я думаю, причина в том, что это происходит из-за того, что ScrollView пытается сохранить все компоненты на экране. Как сделать так, чтобы при использовании 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,

},

});

спросил(а) 2020-04-04T05:30:39+03:00 5 месяцев, 4 недели назад
1
Решение
69

Вам нужно будет использовать комбинацию onLayout для получения координат вашего TextInput а затем использовать onFocus для scrollTo() (передать эти координаты) в ScrollView...

или используйте библиотеку, подобную этой: https://github.com/APSL/react-native-keyboard-aware-scroll-view

ответил(а) 2020-04-04T05:45:41.072053+03:00 5 месяцев, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема