如何从屏幕组件通过Props传递Navigation给列表组件实现页面跳转？

嘿，这事儿其实挺 straightforward 的，我给你拆解成几步来实现：

1. 确保在首页正确传递 navigation 给列表组件 #

不管你的Home页面是类组件还是函数组件，只要把它拿到的navigation prop直接传给你的列表组件就行。举个例子：

类组件版Home页面 #

import React, { Component } from 'react';
import { View } from 'react-native';
import CustomList from './CustomList'; // 你的列表组件路径

class Home extends Component {
  render() {
    return (
      <View>
        {/* 把navigation传递给列表组件 */}
        <CustomList navigation={this.props.navigation} />
      </View>
    );
  }
}

export default Home;

函数组件版Home页面 #

import React from 'react';
import { View } from 'react-native';
import CustomList from './CustomList';

const Home = ({ navigation }) => {
  return (
    <View>
      <CustomList navigation={navigation} />
    </View>
  );
};

export default Home;

2. 在列表组件中处理跳转逻辑 #

在你的列表组件里，给每个列表项绑定onPress事件，调用navigation.navigate()跳转到Stack Navigator里定义好的页面。比如你的列表项是“营养页面”，就对应跳转到Nutrition路由：

import React from 'react';
import { FlatList, Text, TouchableOpacity, StyleSheet } from 'react-native';

// 假设你的列表数据是这样的
const listData = [
  { id: '1', title: '营养页面', screen: 'Nutrition' },
  { id: '2', title: '其他页面', screen: 'OtherScreen' },
  // 更多列表项...
];

const CustomList = ({ navigation }) => {
  const renderItem = ({ item }) => (
    <TouchableOpacity 
      style={styles.listItem}
      onPress={() => {
        // 根据列表项的screen字段跳转到对应页面
        navigation.navigate(item.screen);
      }}
    >
      <Text style={styles.itemText}>{item.title}</Text>
    </TouchableOpacity>
  );

  return (
    <FlatList
      data={listData}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  );
};

const styles = StyleSheet.create({
  listItem: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  itemText: {
    fontSize: 18,
  },
});

export default CustomList;

3. 确认你的Stack Navigator配置正确 #

你给出的router.js片段可以补全成这样，确保每个要跳转的页面都在Stack里注册了：

import { StackNavigator } from 'react-navigation'; // 注意版本，v4用这个，v5+用@react-navigation/native
import Home from './Home';
import Nutrition from './Nutrition';
import OtherScreen from './OtherScreen';

export const HomeStack = StackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
  Nutrition: {
    screen: Nutrition,
    navigationOptions: {
      title: '营养指南',
    },
  },
  OtherScreen: {
    screen: OtherScreen,
    navigationOptions: {
      title: '其他页面',
    },
  },
});

这样一来，当你点击列表里的任意一项，就能直接跳转到对应的页面啦！如果是用React Navigation v5+的版本，写法会有点不一样，但核心逻辑都是传递navigation和调用navigate方法~

内容的提问来源于stack exchange，提问作者0xgareth