当我将要呈现的组件分离到另一个页面时，导航不起作用

Question

目前我正在尝试在分段控件中创建一个列表视图。我在我的主文件中设置了一个分段控件，这样当 segment

main.js

{this.state.seg === 2 && (
   <List
     dataArray={datas}
     renderRow={data =>
       <ListItem
         button
         onPress={() => this.props.navigation.navigate(data.route)}
       >
         <Left>
           <Text>
             {data.text}
           </Text>
         </Left>
         <Right>
           <Icon name="arrow-forward" />
         </Right>
       </ListItem>
     }
  />
)}

这可以正常工作并导航到一个全新的页面到我想要导航的路线。但是，如果我尝试像这样分开它

ListView.js

class ListView extends Component {
  render() {
    return (         
      <List
        dataArray={datas}
        renderRow={data =>
          <ListItem
            button
            onPress={() => this.props.navigation.navigate(data.route)}
          >
            <Left>
              <Text>
                {data.text}
              </Text>
            </Left>
            <Right>
              <Icon name="arrow-forward" />
            </Right>
          </ListItem>
        } 
      />
    );
  } 
}

和main.js作为

{this.state.seg === 2 && 
  <ListView />
}

我的代码不起作用，它给我的错误是

undefined 不是对象（正在评估“_this2.props.navigation”）。

任何帮助将不胜感激！

Answer 1

您必须将 navigation 道具发送到您的 ListView 以便它可以访问它：

{this.state.seg === 2 && 
  <ListView navigation={this.props.navigation} />
}