Реагируйте на Native-Android:

Question

Я все еще разрабатываю свой простой калькулятор, чтобы знать основы React Native, а также изучаю в Интернете и оригинальную документацию по реагированию, и я наткнулся на эту проблему.

мой код:

                {/****** TEXT INPUT CONTAINER ******/}
                <View style={styles.textInputContainer}>
                {/****** TEXT INPUT 1 ******/}
                <TextInput style={styles.textInput1}

                underlineColorAndroid="transparent"
                placeholder = {" Enter 1st \n number \n here."}
                placeholderTextColor = '#66FCF1'
                keyboardType = 'number-pad'
                multiline = {true}
                returnKeyType = {"next"}
                onSubmitEditing={ this.secondInput.focus() } //* This 
will shift the focus to the next textinput *

                >
                </TextInput>

                {/****** TEXT INPUT 2 ******/}
                <TextInput style={styles.textInput2}

                placeholder = {" Enter 2nd \n number \n here."}
                placeholderTextColor ='#EDF5E1'
                keyboardType = 'number-pad'
                multiline = {true}
                onSubmitEditing={ Keyboard.dismiss } //* This will 
dismiss the keyboard once user submitted *

                >


                </TextInput>
            </View>

У меня есть 2 TextInputs в моем коде, и когда пользователь вводит значение в textinput1, фокус будет смещен в textinput2.Я проверил некоторые вопросы здесь и ответы, и это самый близкий и простой путь, который я видел, чтобы медленно понять основы реакции на нативную.

onSubmitEditing={() => { this.secondTextInput.focus(); }}

, но я заметил, что у моего secondInput нет ни идентификатора, ни именизвонить.Как мне это сделать?Я проверил онлайн документацию textinput, в которой нет ни идентификатора, ни имениЯ был бы очень рад, если бы вы могли помочь мне в этом.Спасибо!

Answer 1

Вы можете использовать ссылку здесь.Попробуйте приведенный ниже код.

<TextInput style={styles.textInput1}
            underlineColorAndroid="transparent"
            placeholder = {" Enter 1st \n number \n here."}
            placeholderTextColor = '#66FCF1'
            keyboardType = 'number-pad'
            multiline = {true}
            returnKeyType = {"next"}
            onSubmitEditing={(event) => this._password._root.focus()}
            >
</TextInput>

            {/****** TEXT INPUT 2 ******/}
<TextInput style={styles.textInput2}
            getRef={(c) => this._password = c}
            placeholder = {" Enter 2nd \n number \n here."}
            placeholderTextColor ='#EDF5E1'
            keyboardType = 'number-pad'
            multiline = {true}
            onSubmitEditing={ Keyboard.dismiss }
            >

Answer 2

{/ ****** TEXT INPUT 1 ****** /}

<TextInput style={styles.textInput1}
            underlineColorAndroid="transparent"
            placeholder = {" Enter 1st \n number \n here."}
            placeholderTextColor = '#66FCF1'
            keyboardType = 'number-pad'
            multiline = {true}
            returnKeyType = {"next"}
            onSubmitEditing={(event) => this.passwordTextInput.focus()} // focus on password textInput on submit 
            blurOnSubmit={false} //add this to prevent keyboard flickering
            >
</TextInput>

{/ ****** TEXT INPUT 2 ****** /}

<TextInput style={styles.textInput2}
           ref={(r) => this.passwordTextInput = r} // initialize reference for your password txetInput
            placeholder = {" Enter 2nd \n number \n here."}
            placeholderTextColor ='#EDF5E1'
            keyboardType = 'number-pad'
            multiline = {true}
            onSubmitEditing={ Keyboard.dismiss }
            >

Answer 3

Во втором теге textInput вы должны добавить следующий код.Тогда первый ввод будет сосредоточен на этом

<TextInput
    ref={(input) => { this.secondTextInput = input; }}
>

Просто убедитесь, что вы вызываете то же имя из первого texInput, который вы дали в качестве ссылочного имени во втором textInput.