Question

我正在使用 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",
}

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

Answer 1

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

setIdentity('Man');

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

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

Answer 2

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

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

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

2 个答案: