如何为FlatList列表项配置跳转链接以跳转到详情页

步骤1：修改data数组配置跳转关联字段 #

给每个列表项新增跳转目标标识字段，后续点击时可以直接读取该字段判断要跳转到哪个页面，示例配置如下：

this.state = {
  data: [
    {
      id: 1,
      title: 'Stuck on my mind?',
      color: '#fff8bf',
      image: 'https://cdn0.iconfinder.com/data/icons/business-management-3-4/256/m-16-256.png',
      // 新增跳转目标页面字段，值对应你项目中注册的路由名称
      targetScreen: 'MindNote'
    },
    {
      id:2 ,
      title: 'Feed Back',
      color: '#fff8bf',
      image: 'https://cdn0.iconfinder.com/data/icons/business-management-3-4/256/m-17-256.png',
      targetScreen: 'Feedback'
    },
  ],
};

步骤2：替换点击事件为跳转逻辑 #

主流React Native项目一般用React Navigation做路由管理，你可以直接在TouchableOpacity的onPress回调中读取当前item的跳转字段执行跳转：

• 如果你当前组件是路由注册的页面，直接通过this.props.navigation调用跳转方法即可
• 如果是普通子组件，可以用withNavigation高阶组件包裹后获取navigation实例

跳转逻辑修改示例：

<TouchableOpacity
  style={[styles.card, {backgroundColor: item.color}]}
  // 替换原来的alert为跳转逻辑
  onPress={() => this.props.navigation.navigate(item.targetScreen, {
    // 可以额外携带参数到详情页，比如当前item的id、标题等
    itemId: item.id,
    itemTitle: item.title
  })}
>

完整修改后的代码 #

import { withNavigation } from 'react-navigation'; // 普通子组件需要引入，路由注册页面无需引入
// 此处保留你原来的其他引入代码

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          id: 1,
          title: 'Stuck on my mind?',
          color: '#fff8bf',
          image: 'https://cdn0.iconfinder.com/data/icons/business-management-3-4/256/m-16-256.png',
          targetScreen: 'MindNote'
        },
        {
          id:2 ,
          title: 'Feed Back',
          color: '#fff8bf',
          image: 'https://cdn0.iconfinder.com/data/icons/business-management-3-4/256/m-17-256.png',
          targetScreen: 'Feedback'
        },
      ],
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={styles.list}
          contentContainerStyle={styles.listContainer}
          data={this.state.data}
          horizontal={false}
          numColumns={2}
          keyExtractor={item => {
            return item.id;
          }}
          renderItem={({item}) => {
            return (
              <TouchableOpacity
                style={[styles.card, {backgroundColor: item.color}]}
                onPress={() => this.props.navigation.navigate(item.targetScreen, {
                  itemId: item.id
                })}
              >
                <View style={styles.cardHeader}>
                  <Text style={styles.title}>{item.title}</Text>
                </View>
                <View>
                  {/* 原代码用Text渲染图片链接会只显示文本，要显示图片需替换为Image组件 */}
                  <Image source={{uri: item.image}} style={{width:50,height:50}} />
                </View>
              </TouchableOpacity>
            );
          }}
        />
      </View>
    );
  }
}

// 普通子组件导出时需要用withNavigation包裹，路由注册页面直接导出即可
export default withNavigation(Menu);

补充说明 #

• 详情页可以通过this.props.route.params.itemId拿到传递的参数，完成对应页面的渲染逻辑
• targetScreen的取值必须和你项目路由表中注册的页面名称完全一致，否则会跳转失败

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