React Native Touchable Opacity OnPress 使用数据

Question

我的目标是我有 2 个屏幕，并且我想在使用 TouchableOpacity 进行单击时显示输出。例如，第一个屏幕将显示来自我的数据 First、Second 和 Third 的标题的Flatlist。所以我想要它做的是，如果我按 First，它会将我移动到另一个屏幕并显示输出 FlatList a,b,c。如果我按秒，它会将我移动到另一个屏幕并显示 1、2、3。所以我不确定如何使用TouchableOpacity移动到另一个屏幕

这是我的数据

const Clusdata = 
[
{ title: 'First', 
  example: 
 [
 {name: 'a'},
 {name: 'b'},
 {name: 'c'},
 ],
},
{ title: 'Second', 
  example: 
 [
 {name: '1'},
 {name: '2'},
 {name: '3'},
 ],
},
{ title: 'Third', 
  example: 
 [
 {name: '4'},
 {name: '5'},
 {name: '6'},   
 ],
}
]

这是我的Flatlist，我可以显示的第一个屏幕

export default class Cluster1 extends Component{
render() {

  return (
    <View>
      <FlatList
        data={ClusData}
        renderItem={({ item, index }) => {
          return <FlatListItem item={item} index={index} />;
        }}
      />
    </View>
  );
}
}

class FlatListItem extends Component {
render() {
  return (
    <View>
      <View>
          <TouchableOpacity>
        <Text>{this.props.item.title}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}
}

我创建了另一个类，但我不知道要在里面存储什么，所以我把它留空了

class FlatlistExample extends Component {

}

Answer 1

转到另一个屏幕意味着在 react-native 中导航。 React Native 没有任何开箱即用的导航解决方案，但有很多导航库可供您使用。为了能够实现您想要做的事情，您需要为您的项目找到合适的导航库并在您的项目中实现它。大多数库都支持在导航操作/功能中发送某种参数。实现导航库后，您可以使用该功能来实现所需的结构。

你可以在awesome-react-native repo找到很多导航相关的库。

Answer 2

使用这个：https://github.com/aksonov/react-native-router-flux。

将数据发送到另一个视图：Actions.view_name({key: value,key1:value1,key2:value2})