反応的なログインフォームを作成すると、ユーザーがキーボードを使用しようとするまでうまくいくように見えます。どのようにコンポーネントが画面上で圧縮されないようにしますか？

Question

現在、静的ログイン/情報ページを構築しています。フォームでは、名前、Eメール、電話番号、性別、誕生日を尋ねます。私は両方のコンテナを囲むためにScrollViewを使用しました。最初のコンテナには3つのTextInputとラジオボタンがあります。 2番目のコンテナには、ユーザーが誕生日を入力するための3つのPickersがあります。私が情報を入力しようとするまでは、すべてが比較的よく見えます。 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, 

    }, 

}); 

Answer 1

あなたはどちらかあなたのTextInputの座標を取得し、あなたのScrollViewに（それらの座標を渡す）scrollTo()を発射するonFocusを使用するonLayoutの組み合わせを使用する必要があります：ここで

はコードです。 ..

またはこのいずれかのようなライブラリを使用します。https://github.com/APSL/react-native-keyboard-aware-scroll-view