使用 TouchableOpacity 导航时如何设置状态？答案

【问题标题】：How do you set state when navigating with TouchableOpacity react native使用 TouchableOpacity 导航时如何设置状态？
【发布时间】：2021-04-15 15:55:14
【问题描述】：

我正在使用 TouchableOpacity，当我按下它时，我想设置一些状态，然后在导航时将该状态作为道具传递。但是，当我尝试它在状态更新之前导航。这是我的代码：

import {TouchableOpacity} from 'react-native-gesture-handler';

type props = {
    route: any,
}

const Identity = ({route}: props) => {
    const [identity, setIdentity] = useState('')

    const navigation = useNavigation();

    const {name, date} = (route.params)

    const [loaded] = useFonts({
        Poppins_600SemiBold,
    });

    if (!loaded) {
        return null;
    }

    return (
        <SafeAreaView style={styles.container}>
            <PageIndicator currentPosition={2}/>
            <View>
                <Text style={{
                    marginTop: 100,
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontFamily: 'Poppins_600SemiBold',
                    fontSize: 30,
                    paddingLeft: 30
                }}
                >
                    What's your gender?
                </Text>
                <View style={styles.row}>
                    <TouchableOpacity
                        style={styles.button}

                        onPress={() => {
                            setIdentity('Man');
                            navigation.addListener('focus', () => {
                                setIdentity('Man')
                            });
                            navigation.navigate('InterestedIn', {
                                name,
                                date,
                                identity
                            });
                        }}
                    >
                        <Text style={{
                            color: '#fc92c5',
                            fontFamily: 'Poppins_600SemiBold',
                            fontSize: 15,

                        }}
                        >
                            Man
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            setIdentity('Woman')
                            navigation.navigate('InterestedIn', {
                                name,
                                date,
                                identity
                            })
                        }}
                    >
                        <Text style={{
                            color: '#fc92c5',
                            fontFamily: 'Poppins_600SemiBold',
                            fontSize: 15,
                        }}
                        >
                            Woman
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            setIdentity('Other')
                            navigation.navigate('InterestedIn', {
                                name,
                                date,
                                identity
                            })
                        }}
                    >
                        <Text style={{
                            color: '#fc92c5',
                            fontFamily: 'Poppins_600SemiBold',
                            fontSize: 15,
                        }}
                        >
                            Other
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        </SafeAreaView>
    );
}

export default Identity;

这是我的代码导航到的位置：

import React, {useState} from "react";
import {SafeAreaView, StyleSheet, Text, View} from "react-native";
import {useNavigation} from "@react-navigation/native";
import {useFonts} from 'expo-font';
import {Poppins_600SemiBold} from '@expo-google-fonts/poppins';
import {TouchableOpacity} from 'react-native-gesture-handler';
import PageIndicator from './PageIndicator';

type props = {
    route: any,
}

const InterestedIn = ({route}: props) => {
    const [interest, setInterest] = useState('')

    const navigation = useNavigation();

    const {name, date, identity} = (route.params)

   // console.log(name)
   // console.log(date)
    console.log("identity", identity)
    console.log(route.params)

    const [loaded] = useFonts({
        Poppins_600SemiBold,
    });

    if (!loaded) {
        return null;
    }

    return (
        <SafeAreaView style={styles.container}>
            <PageIndicator currentPosition={3}/>
            <View>
                <Text style={{
                    marginTop: 100,
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontFamily: 'Poppins_600SemiBold',
                    fontSize: 30,
                    paddingLeft: 30
                }}
                >
                    Who do you want to date?
                </Text>
                <View style={styles.row}>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            navigation.navigate('navigator')
                            setInterest('Men')
                        }}
                    >
                        <Text style={{
                            color: '#FFF',
                            fontFamily: 'Poppins_600SemiBold',
                            fontSize: 15,

                        }}
                        >
                            Men
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            navigation.navigate('navigator')
                            setInterest('Women')
                        }}
                    >
                        <Text style={{
                            color: '#FFF',
                            fontFamily: 'Poppins_600SemiBold',
                            fontSize: 15,
                        }}
                        >
                            Women
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            navigation.navigate('navigator')
                            setInterest('Everyone')
                        }}
                    >
                        <Text style={{
                            color: '#FFF',
                            fontFamily: 'Poppins_600SemiBold',
                            fontSize: 15,
                        }}
                        >
                            Everyone
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        </SafeAreaView>
    );
}

export default InterestedIn;

这是控制台日志：

    identity
Object {
  "date": 2002-04-03T23:00:00.000Z,
  "identity": "",
  "name": "Ol",
}

我尝试在导航中添加一个事件侦听器，但没有奏效。你有什么建议，或者更好的方法来将文本赋予可触摸的不透明度而不是这种方式？谢谢:)

【问题讨论】：

标签： javascript reactjs react-native state touchableopacity

【解决方案1】：

您可以使用 useEffect，基于 (documentation，看起来像这样：

useEffect(() => {
    if (identity) {
        navigation.navigate('InterestedIn', {
             name,
             date,
             identity
        });
    }
});

【讨论】：

我的组件加载后不会立即导航吗？
如果我执行 Error: Invalid hook call，我会收到此错误。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用
您需要在导航前检查您感兴趣的状态值是否发生了变化。我更新了代码示例，您可能需要对其进行调整以适应您的需求