javascript - 在 React Native 中制作一个可重用的组件？

Question

我制作了一个可重用的组件来渲染一个 Flatlist 并且在按下它时我有一个 TouchableOpacity 我想导航到一个特定的屏幕， 我根据 FlateList 中的项目传递了一些参数

所以当我按下导航键时出现错误

can't read property navigate of undefined

这是我的代码

const OrdersList = props => {
  return (
    <View style={styles.container}>
      <FlatList
        data={props.data}
        renderItem={({item}) => {
          return (
            <TouchableOpacity
              onPress={() =>
                props.navigation.navigate(props.screenName, {
                  ...
                  service: item.service,
                  date: item.date,
                  ...
                })
              }
             >
                <Text>
                  {item.service}
                </Text>
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
};

我是这样用的

 <OrdersList
          data={this.state.orders}
          extraData={this.state}
          screenName="OrderHomeDetails"
          // navigate={ // when i do it i got error he can't find item and thats usual 
          //   (this.props.navigation.navigate,
          //   {
          //     service: item.service,
          //     time: item.time,
          //     username: item.username,
          //     buildingNumber: item.buildingNumber,
          //     date: item.date,
          //     description: item.description,
          //     images: item.images,
          //     status: item.status,
          //     snapshotKey: item.snapshotKey,
          //   })
          // }
        />

Answer 1

你的错误是告诉我无论什么组件正在渲染 OrdersList 都没有接收到导航 Prop 。如果此组件是一个屏幕，则应导航到它以接收导航 Prop (这意味着它列在您使用的任何 create*navigator 上)。

由于我无法完全访问您的代码，我建议您在 OrdersList 上使用 withNavigation 装饰器，这样您就不再需要从父级传递导航 Prop 。

const OrdersList_ = props => {
  return (
    <View style={styles.container}>
      <FlatList
        data={props.data}
        renderItem={({item}) => {
          return (
            <TouchableOpacity
              onPress={() =>
                props.navigation.navigate(props.screenName, {
                  ...
                  service: item.service,
                  date: item.date,
                  ...
                })
              }
             >
                <Text>
                  {item.service}
                </Text>
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
};

const OrdersList = withNavigation(OrdersList)

 <OrdersList
          data={this.state.orders}
          extraData={this.state}
          screenName="OrderHomeDetails"
          // navigate={ // when i do it i got error he can't find item and thats usual 
          //   (//no need to pass navigation props anymore
          //   {
          //     service: item.service,
          //     time: item.time,
          //     username: item.username,
          //     buildingNumber: item.buildingNumber,
          //     date: item.date,
          //     description: item.description,
          //     images: item.images,
          //     status: item.status,
          //     snapshotKey: item.snapshotKey,
          //   })
          // }
        />

引用:https://reactnavigation.org/docs/en/with-navigation.html