使用 TouchableOpacity 导航时如何设置状态本机反应

如何解决使用 TouchableOpacity 导航时如何设置状态本机反应

我正在使用 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',fontSize: 15,}}
                        >
                            Man
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            setIdentity('Woman')
                            navigation.navigate('InterestedIn',identity
                            })
                        }}
                    >
                        <Text style={{
                            color: '#fc92c5',}}
                        >
                            Woman
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            setIdentity('Other')
                            navigation.navigate('InterestedIn',}}
                        >
                            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,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,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',}}
                        >
                            Men
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            navigation.navigate('navigator')
                            setInterest('Women')
                        }}
                    >
                        <Text style={{
                            color: '#FFF',}}
                        >
                            Women
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            navigation.navigate('navigator')
                            setInterest('Everyone')
                        }}
                    >
                        <Text style={{
                            color: '#FFF',}}
                        >
                            Everyone
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        </SafeAreaView>
    );
}

export default InterestedIn;

这是控制台日志：

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

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

解决方法

它实际上在状态更新后导航，但它发生得太快以至于你看不到它。

setIdentity('Man');

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

如果你尝试这样的事情，你会看到状态得到更新。

,

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

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