javascript - react native 传递导航到 subview

Question

我是 react 性新手

我正在使用FlatList与 app.js并使用 StackNavigator用于像这样的场景之间的导航:

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Content',
  };


  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
      <FlatList
        data = {myData}
          renderItem={({item}) => 
                            <Text style={styles.someStyle} 
                                  onPress={()=>
                                            navigate("Detail", 
                                                     {item: item});}>
                             {item.text}</Text> 
                      }
      />        
      </View>
    );
  }
}

上面的代码可以正常工作:当我按下列出的项目之一时，将加载另一个场景以显示项目内容的详细信息。

但是由于我想要列出的项目具有复杂的样式，因此我认为在 subview 中定义列出的项目会很方便，如下所示:

class MyHomeListItem extends React.PureComponent {
    render(){
        return (
          <View style={styles.item}>
              <Image
                source={require('./assets/book.png')}
                style={styles.listImageIcon}
              />
              // as you can see the following `onPress` was intended for 
              // the same poperse which should load another secene to show the detail.
              <Text onPress={()=>
                              {this.props.ref("Detail", 
                                               {item: this.props.item});}} 
                    style={styles.listItemHomeText}>

                    {this.props.chapterName}: {this.props.chapterTitle}
              </Text>
          </View>
        );
    }
}

我想传递FlatList中的数据作为属性，例如:

 <FlatList
    data = {myData}

      renderItem={({item}) => <MyHomeListItem  chapterName={item.chapterName} chapterTitle={item.chapterTitle} ref={navigate} /> }
  />

如果我没有通过navigate函数到 subview ，事情将无法工作，我认为这很好，所以我到目前为止通过ref传递它这是 navigate 的引用功能(我认为)或只是通过 ref={this}并使用 this.props.ref.navigate(...)在 subview 中，但两者都不起作用。

它将显示:

_this3.props.ref is not a function....'_this3.props.ref' is undefined

那么我该怎么做呢？

此外，我实际上希望整个 subview 都听 onPress但我没有找到onPress <View> 的属性

Answer 1

我相信 ref 是一个保留的 prop，用于将子组件分配给父组件的 ref，以便父组件可以轻松引用子组件。尝试直接通过 navigation={navigate}

传递它

此外，如果您希望整个 View 具有 onPress，请尝试将 View 包装在 Touchable 之一中> 的，即 TouchableHighlight、TouchableOpacity 或 TouchableWithoutFeedback。并将 onPress 函数作为 prop 传递给 Touchable 组件。

此外，就我个人而言，我更喜欢在主页中定义导航逻辑，而项目组件中的 onPress 函数只会传回相应的对象以进行行备份通过从 HomeScreen 组件传递下来的 onRowPress 属性。这样，导航逻辑就不会到处都是，并且行项目组件可以足够通用，以便 onPress 函数始终只传回相应的对象。