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

Question

你好，我是 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

感谢您的每一个回答。

Answer 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" }
]

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

react navigation: navigate outside component | map function

arrays

react-native

react-navigation