使用 React Native 将参数传递到另一个页面答案

【问题标题】：Passing Params to Another Page Using React Native使用 React Native 将参数传递到另一个页面
【发布时间】：2021-08-07 07:31:56
【问题描述】：

如何将我在 DoctorCategory 上的 type2 参数传递到另一个页面？我在下面尝试了这些，但出现错误说can't find variable: type2

这个type2是来自firebase的值

const Home = ({ navigation }) => {
const [categoryDoctor, setCategoryDoctor] = useState([])

useEffect(() => {
    Fire.database()
        .ref('category_doctor/')
        .once('value')
        .then(res => {
            console.log('data category: ', res.val())
            if (res.val()) {
                setCategoryDoctor(res.val())
            }
        })
        .catch(err => {
            showError(err.message)
        })

}, [])

useEffect(() => {
    getData('user').then(res => {
        console.log('data user:', res)
    })
}, [])

return (
        <View style={styles.content}>
            <Text style={styles.welcome}>How can we help you?</Text>
                <View style={styles.category}>
                    <DoctorCategory
                        type1='General'
                        type2={categoryDoctor.categoryA}
                        pic={ILLDocGen}
                        onPress={() => navigation.navigate('ChooseDoctor', type2)} //<== this one
                    />
            </View>
        </View>
)}

我在另一个页面上调用它。

const ChooseDoctor = ({navigation, route}) => {

const type = route.params
return (
    <View style={styles.container}>
        <Header1 type='light' title= {`Select a ${type.type2}`}/>
    </View>
)}

【问题讨论】：

标签： javascript reactjs react-native react-hooks react-navigation

【解决方案1】：

您应该在ChooseDoctor 组件中使用props！使用这个：

const ChooseDoctor = ({navigation, route, props}) => {

return (
    <View style={styles.container}>
        <Header1 type='light' title= {`Select a ${props.type2}`}/>
    </View>
)}

【讨论】：

【解决方案2】：

第二个参数是一个对象

onPress={() => navigation.navigate('ChooseDoctor',{
   type2
)}

参考https://reactnavigation.org/docs/params/#passing-params-to-nested-navigators

【讨论】：