0
현재 정적 로그인/정보 페이지를 작성 중입니다. 양식에 이름, 이메일, 전화 번호, 성별 및 생일을 묻습니다. 두 컨테이너 모두를 감싸기 위해 ScrollView를 사용했습니다. 첫 번째 컨테이너에는 3 개의 TextInputs 및 라디오 버튼이 있습니다. 두 번째 컨테이너에는 사용자가 생일을 입력 할 수있는 3 개의 선택기가 있습니다. 정보 입력을 시도 할 때까지 모든 것이 비교적 잘 보입니다. TextInputs를 클릭하자 마자 화면상의 키보드가 나머지 컴포넌트를 압축/왜곡하여 입력되는 내용을 읽지 못하게하고 나머지 페이지를보기 흉하게 만듭니다.사용자가 키보드를 사용하려고 시도 할 때까지 반응 기본 로그인 양식을 만드는 것이 좋습니다. 구성 요소가 화면에 압축되지 않도록 유지하는 방법은 무엇입니까?
나는이 현상이 발생하는 이유는 ScrollView가 모든 구성 요소를 화면에 유지하려고하기 때문이라고 생각합니다. TextInput을 사용할 때 키보드와 특정 TextInput 만 표시되도록하려면 어떻게해야합니까? 당신은 (그 좌표를 전달) 당신의 TextInput의 좌표를 얻을 수 onLayout의 조합을 사용하고 scrollTo() 해고 onFocus를 사용해야합니다 하나
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,
},
});
응답 해 주셔서 감사합니다. 지연된 응답에 대해 죄송합니다. 나는 작은 휴식을 취했다. – VK1