如何提供 Flatlist 详细信息页面的链接

Question

我在我的应用程序中使用 flatlist，但链接失败。我如何提供链接并将其定向到详细信息页面？ 我找不到如何链接数据[]。

export default 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',
        },
        {
         id:2 ,
          title: 'Feed Back',
          color: '#fff8bf',
          image:
            'https://cdn0.iconfinder.com/data/icons/business-management-3-4/256/m-17-256.png',
        },
      ],
    };
  }

  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={() => alert('This is a button!')}>
                <View style={styles.cardHeader}>
                  <Text style={styles.title}>{item.title}</Text>
                </View>
                <View>
                  <Text>{item.image}</Text>
                </View>
              </TouchableOpacity>
            );
          }}
        />
      </View>
    );
  }
}

当我点击屏幕上的框时，无法切换到下一页。

Answer 1

export default 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',
        },
        {
         id:2 ,
          title: 'Feed Back',
          color: '#fff8bf',
          image:
            'https://cdn0.iconfinder.com/data/icons/business-management-3-4/256/m-17-256.png',
        },
      ],
    };
  }

  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("Pagename", {data:item}>
                <View style={styles.cardHeader}>
                  <Text style={styles.title}>{item.title}</Text>
                </View>
                <View>
                  <Text>{item.image}</Text>
                </View>
              </TouchableOpacity>
            );
          }}
        />
      </View>
    );
  }
}

在其他页面您可以从中获取数据

this.props.route.params.data

然后就可以使用了