react-native - React Native，通过带有 withNavigation 的组件发送列表

Question

我的问题比许多其他类似的问题有些独特：我想通过（功能）组件将一些列表传递到另一个屏幕。它不起作用。

App.js 有：

const switchNavigator = createSwitchNavigator({
    locationAllFlow: createStackNavigator(
        {
            locationsFlow: createStackNavigator(
                {
                    Locations: { screen: LocationsScreen },
                    Search: { screen: SearchScreen }
                },
                {
                    headerMode: 'none'
                }
            ),
            LocationDetail: LocationDetailScreen
        },
        {
            headerMode: 'none'
        }
    ),
...

然后 LocationsScreen 有：

<TitleBar
    title='Locations'
    hasSearch={true}
    list={results.map(result => result.name)}
/>

并且 LocationsScreen 将 TitlBar 作为一个组件：

const TitleBar = ({ navigation, title, hasSearch, list }) => {
...
<TouchableOpacity
    style={{ padding: 8, position: 'absolute', right: 4 }}
    onPress={() => {
        console.log('inside onPress: ', list);
        navigation.navigate('Search', { list });
    }}
>
    <MaterialIcons style={styles.titleIcon} name='search' />
</TouchableOpacity>
...
export default withNavigation(TitleBar);

最后，需要进入 SearchScreen：

const SearchScreen = ({ list }) => {
    console.log('SearchScreen: list.length: ', list);
    return (
        <View style={{ backgroundColor: 'rgb(15, 104, 186)', flex: 1 }}>
            <SafeAreaView>
                <FlatList
                    data={list}
                    keyExtractor={item => item}
                    renderItem={({ item }) => (
                        <TouchableOpacity>
                            <Text>item</Text>
                        </TouchableOpacity>
                    )}
                />
            </SafeAreaView>
        </View>
    );
};

SearchScreen 中出现问题：尽管inside onPress:prints list 非常好，但不知何故，SearchScreen: list.length:prints undefined。为什么？

标签： react-native

Answer 1

list不会作为参数传递给 SearchScreen。你应该navigation.getParam(paramID, defaultValue)改用

文档参考：https ://reactnavigation.org/docs/en/params.html