有没有办法在 react-native 的数组映射结果中进行印前导航

Question

>我在this.state.members中有一个简单的名称数组。我使用 map 函数来迭代成员。我想为每个成员添加一个按钮，因此，当我单击它们时，我会转到每个成员专用的屏幕。我测试了按钮，它正在工作。但是对于那些在map函数内部的人来说，它说"undefined不是一个对象(评估'_this2.props.navigation'(上报"我花了一整天的时间试图了解发生了什么，但没有任何运气。任何帮助将不胜感激。这是我的代码

import { StyleSheet, Text, View } from "react-native";
import { ListItem, Button } from "react-native-elements";
export default class ProfileScreen extends React.Component {
 static navigationOptions = {
   header: null
 };
 constructor(props) {
   super(props);
   this.state = {
     members: ["Allie", "Gator", "Lizzie"],
     id_groupe: "",
     groupe: ""
   };
   // this.handleSubmit = this.handleSubmit.bind(this);
 }
 render() {
   const members = this.state.members;
   const namesList = members.map(function(name, i) {
     return (
       <Button
         onPress={() => this.props.navigation.navigate("Home")}
         title={name}
         key={i}
       />
     );
   });
   return (
     <View style={styles.container}>
       <View>{namesList}</View>
       <View>
         <Button
           title="Back to home"
           onPress={() => this.props.navigation.navigate("Home")}
         />
       </View>
     </View>
   );
 }
}
const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: "#fff",
   alignItems: "center",
   justifyContent: "center"
 }
});

Answer 1

只需使用箭头函数，您就不会遇到this问题。但不确定您的实际问题，如果箭头功能有效，让我们检查您是否有任何其他问题。使用map迭代时的箭头功能：

const namesList = members.map((name, i) => {
     return (
       <Button
         onPress={() => this.props.navigation.navigate("Home")}
         title={name}
         key={i}
       />
     );
   });