reactnative通导航到子视图

我使用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> 
    ); 
    } 
}

上面的代码将很好地工作：当我按下一个列出的项目，将加载另一个场景以显示项目内容的详细信息。

但因为我想为所列项目复杂的造型，我认为这将是方便的，我在这样的一个子视图定义的列表项目：

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功能传递给子视图，那么就会出问题，我认为是好的，所以我将它传递通过ref到目前为止是的参考navigate功能（我想）或只是通过ref={this}和在子视图中使用this.props.ref.navigate(...)，但要么不工作。

它会显示：

所以

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

我怎样才能做到这一点？

Furthur多，其实我是想整子视图听onPress但我没有找到<View>

来源

2017-07-21 armnotstrong

子视图中的属性值是什么？ – error404

'_this3.props.ref不是一个函数...._ this3.props.ref是不确定的' – armnotstrong

我的意思是你可以在render方法中使用console.log（this.props）共享完整的日志。在return语句之前放置该行并共享日志。 – error404

的onPress属性，我相信ref是用于分配的子组件是在裁判保留道具的父组件，以便父组件可以轻松引用子组件。尝试它向下传递直通navigation={navigate}

另外，如果你想onPress整个View，尝试在Touchable的一个包裹View，即TouchableHighlight，TouchableOpacity，或TouchableWithoutFeedback。并将onPress作为道具传递给Touchable组件。

另外，亲自，我更喜欢限定所述主页的navigation逻辑，并在项目组件onPress函数将只是传回相应的对象的行备份经由onRowPress丙从主屏幕组件向下传递。这样，导航逻辑并不是全部，行项组件可能足够通用，以至于onPress函数总是会传回相应的对象。

来源

2017-07-21 17:15:58 hyb175

嘿刚刚尝试导航= {导航}，它的工作，编辑答案接受它如果你不介意，谢谢提醒ref是一个保留字。 – armnotstrong

reactnative通导航到子视图

回答

相关问题