使用数据对本机可触摸不透明度进行反应

Question

我的目标是我有 2 个屏幕，每当我使用TouchableOpacity单击时，我都想显示输出。例如，第一个屏幕将显示我的数据"第一"、"第二"和"第三"中的标题Flatlist。所以我希望它做的是，如果我按 First，它会将我移动到另一个屏幕并显示输出FlatLista，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。

Answer 2

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

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