使用 TouchableOpacity 導航時如何設置 state 反應原生

Question

我正在使用 TouchableOpacity，當我按下它時，我想設置一些 state，然后在導航時將 state 作為道具傳遞。 但是，當我嘗試它在 state 更新之前導航。 這是我的代碼：

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",
}

我試圖在導航中添加一個事件偵聽器，但這沒有用。 您有什么建議，或者可能有更好的方法將文本賦予可觸摸的不透明度而不是這種方式？ 謝謝：）

Answer 1

它實際上在 state 更新后導航，但它發生得如此之快以至於你看不到它。

setIdentity('Man');

setTimeout(() => navigation.navigate('InterestedIn', {
  name,
  date,
  identity
}), 1000)

如果你嘗試這樣的事情，你會看到 state 得到更新。

Answer 2

您可以使用useEffect ，基於 (文檔，看起來像這樣：

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