反应导航：导航外部组件 |地图功能答案

【问题标题】：react navigation: navigate outside component | map function反应导航：导航外部组件 |地图功能
【发布时间】：2018-01-21 16:01:18
【问题描述】：

您好，我是 RN 新手，我的反应导航没有什么问题。我想从一个数组中写出盒子。每个框都有相同的导航路径。我想这是导航外部组件的问题，但我不知道如何解决它。

代码：

WriteTeams() {
    return teams_array.map(function(Teams, i){
        return(
        <View key={i}>
            <TouchableHighlight onPress={() =>
            this.props.navigation.navigate('TeamDetail')}>
                <Text>{Teams.TeamName}</Text>
            </TouchableHighlight>
        </View>
        );
    });
}
render(){
       <ScrollView>
           <View>
              <View>
                 {this.WriteTeams()}
              </View>
           </View>
       </ScrollView>
    }
}
const teams_array = [
  { TeamName: "Some team"},
  { TeamName: "Some team2"}
]

Error screen

感谢您的每一个回答。

【问题讨论】：

标签： arrays react-native react-navigation

【解决方案1】：

错误消息表明导航对象没有作为属性传递到组件中。

您需要将导航对象从渲染函数传递到 WriteTeams 组件，以使其在您的代码中可用。

我已复制并修改了您的代码以帮助解释

WriteTeams(navigation) {
    return teams_array.map(function(Teams, i){
        return(
            <View key={i}>
                <TouchableHighlight
                    onPress={() => navigation.navigate('TeamDetail')}
                >
                    <Text>{Teams.TeamName}</Text>
                </TouchableHighlight>
            </View>
        );
    });
}
render(){
    return (
        <ScrollView>
            <View>
                <View>
                    {this.WriteTeams(this.props.navigation)}
                </View>
            </View>
        </ScrollView>
    )
}
const teams_array = [
    { TeamName: "Some team" },
    { TeamName: "Some team2" }
]

【讨论】：