使用數據反應本機可觸摸不透明度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沒有任何現成的導航解決方案，但是您可以使用很多導航庫。 為了能夠實現您想要的功能，您需要為項目找到合適的導航庫並在項目中實現。 大多數庫都支持導航操作/功能中的某種參數發送。 實現導航庫后，您可以使用該功能來實現所需的結構。

您可以在awesome-react-native repo中找到許多與導航相關的庫。

Answer 2

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

將數據發送到另一個視圖： Actions.view_name({key: value,key1:value1,key2:value2})