Question

在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，它将正常工作。

Answer 1

您应将@cypher声明更改为

MyList

由于const MyList = ( { items, navigate } ) => {...}是一个功能组件，传递给它的所有道具都可以用作第一个参数。我只是在使用对象分解来从该对象获取所需的属性。

您也可以使用MyList包装该组件，而不是将navigate作为MyList中的道具来传递，而是查看文档https://grandstack.io/docs/neo4j-graphql-js.html#relationships-with-properties。如果使用withNavigation包装它，则可以直接从withNavigation访问导航器对象。

希望这会有所帮助！

通过导航作为道具

1 个答案: