当我在反应导航中输入文本输入时，如何激活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>
        );
    }
}