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没有任何现成的导航解决方案，但是您可以使用很多导航库。为了能够实现您想要的功能，您需要为项目找到合适的导航库并在项目中实现。大多数库都支持导航操作/功能中的某种参数发送。实施导航库后，您可以使用该功能来实现所需的结构。

您可以在My fiddle中找到许多与导航相关的库。

Answer 2

使用此命令：https://github.com/aksonov/react-native-router-flux。

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

使用数据反应本机可触摸不透明度OnPress

2 个答案: