Stack.Screen の名前がファイルに由来するFlatListプロパティで React Navigation を使用する方法を知りたい.json
です。
そして、ユーザーがそのアイテムをクリックすると、アプリケーションの別のページに移動します。
データ
{
Data: [
{
"key": "0",
"label": "Test",
"goTo": "Test", <--- Here goes the name of Stack.Screen from routes.js
}
]
}
FlatList 構造
function Item({ label, goTo }) {
return (
<Ripple rippleCentered onPressIn={goTo}> // (react-native-material-ripple)
<Option>
<Icon name={onIcon} size={28} color={onColor} /> // (react-native-vector-icons)
<OptionLabel color={onColor}>{label}</OptionLabel>
</Option>
</Ripple>
);
}
Ripple のnavigation.navigate({goTo})
onプロパティを使用しようとしましたが、ReferenceError が表示されます: Can't find variable: navigationonPressIn
最終的にエクスポートされたコンポーネント
export default class Menu extends Component {
render() {
return (
<Container color={this.props.color}>
<FlatList
data={Data}
showsVerticalScrollIndicator={false}
keyExtractor={item => item.key}
numColumns={5}
columnWrapperStyle={Styles.Row}
renderItem={({ item }) =>
<Item
goTo={item.goTo}
label={item.label}
/>
}
/>
</Container>
);
}
}