Как я могу активировать кнопку, которая находится внутри NavigationOptions, когда я пишу в текстовом вводе в реагирующей навигации?

Question

Очень хорошо, я новичок, чтобы реагировать на нативную, и я пытаюсь создать приложение для опроса, в котором я хочу добавить кнопку «Далее» в мой заголовок, и это можно нажать или активировать только при вводе символа втекстовый ввод, который будет в центре экрана, пока что я сделал кнопку и перешел на другой экран с NavigationOptions, но я не могу сделать другое, если кто-то знает, поможет мне большое спасибо.

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    TextInput
} from "react-native";

class Screen1 extends Component {


    static navigationOptions = ({ navigation }) => ({
            headerTitle: (
                <Image
                    source={require('../Icons/icon3.png')}
                    style={{ width: 35, height: 35, marginLeft: 10 }}
                />
            ),
            headerRight: (
                <View>
                    <TouchableOpacity 
                    disabled={Idonotknowhowtodoit} 
                    onPress={() => navigation.navigate('Screen2')} 
                    style={styles.Btn}>
                        <Text 
                        style={styles.TxtBtn}>Next</Text>
                    </TouchableOpacity>
                </View>
            ),
    });

    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    type="text"
                    placeholder="Enter Text"
                />
            </View>
        );
    }
}
export default Screen1;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    Btn: {
        marginRight: 5,
        justifyContent: 'center',
        borderWidth: 2,
        borderColor: '#000',
        borderRadius: 2,
        backgroundColor: '#000',
        padding: 4
    },
    TxtBtn: {
        textAlign: 'center',
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold'
    }
});

Answer 1

Вы можете использовать параметры, чтобы проверить, отключена или активна кнопка в navigationOptions .

class Screen1 extends Component {

    constructor(props) {
       super(props);
       this.state = {
        text: '' 
      };
  }
  static navigationOptions = ({ navigation }) => ({
            headerTitle: (
                <Image
                    source={require('../Icons/icon3.png')}
                    style={{ width: 35, height: 35, marginLeft: 10 }}
                />
            ),
            headerRight: (
                <View>
                    <TouchableOpacity 
                    disabled={navigation.getParam('isDisable')} // get value from params and pass it to disabled props
                    onPress={() => navigation.navigate('Screen2')} 
                    style={styles.Btn}>
                        <Text 
                        style={styles.TxtBtn}>Next</Text>
                    </TouchableOpacity>
                </View>
            ),
    });

  // set by a default value in componentDidMount to make the next button disable initially
      componentDidMount() {
        this.props.navigation.setParams({ isDisable: true });
    }
    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    type="text"
                    placeholder="Enter Text"
                    value={this.state.text} //set value from state
                    onChangeText={(text) => {
                        //when text length is greater than 0 than next button active otherwise it will be disable
                        let isDisable = text.length > 0 ? false : true
                        //set value in the state
                        this.setState({
                            text: text
                        })
                        // set value to params
                        this.props.navigation.setParams({ isDisable: isDisable});

                    }
                    }
                />
            </View>
        );
    }
}