1

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>
    );
  }
}
4

1 に答える 1