react-native - 将导航作为道具传递

问题描述

在 React Native 中，使用时createStackNavigator，如何navigate作为道具传递？

在下面的示例中，items工作正常，但是navigate当undefined传递给MyList.
这意味着按下按钮会引发错误：undefined is not a function(evaluating 'navigate('ItemDetails', { itemId: item.id })').
我怎样才能传递navigate给MyList？

export class MyScreen extends React.Component {
    render() {
        const { items }  = this.props;
        const { navigate } = this.props.navigation;
        console.log(navigate); // this logs [Function anonymous] :)
        return (
            <View>
                <MyList items={items} navigate={navigate} />
            </View>
        );
    }
}

const MyList = ( { items }, { navigate } ) => {
    console.log(navigate); // this logs undefined :(
    return (
        <ScrollView>{ 
            items && items.map( item => 
                <View key={item.id}>
                    <TouchableOpacity onPress={ () =>
                        navigate( 'ItemDetails', { itemId: item.id } )
                    }>
                        <Text>Go</Text>
                    </TouchableOpacity>
                </View>
        )}</ScrollView>
)}

PS：如果我将所有代码MyList直接移到MyScreen中，它会正常工作。

标签： react-nativereact-navigationreact-props

您应该将MyList声明更改为

const MyList = ( { items, navigate } ) => {...}

由于，MyList是一个功能组件，传递给它的任何道具都将作为第一个参数可用。我只是使用对象解构从该对象获取所需的属性。

navigate除了作为 props传入之外MyList，您还可以使用包装组件，请查看此处withNavigation的文档。如果您使用包装它，您可以直接从访问导航器对象。withNavigationprops

希望这会有所帮助！

react-native - 将导航作为道具传递

问题描述

解决方案

推荐阅读