在地图功能中反应本机导航

Posted 2023-02-16

【中文标题】在地图功能中反应本机导航

【英文标题】：React Native Navigation inside Map Function

【发布时间】：2022-01-21 17:55:32

【问题描述】：

我正在尝试使用 React Native 中的 Map 函数从 JSON 数据生成卡片。

我希望能够通过单击此卡片导航到另一个页面。

这是我正在尝试的解决方案：

function display() 
  
  return restaurant.map((item) => 
    return(
      <TouchableHighlight onPress=() => this.props.navigation.navigate('Restaurant')>
        <View style=styles.card>
          <View style=styles.cardHeadText>
            <Text style=styles.title>
               item.name 
            </Text>
            <Text>
               item.type 
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  );


class RestaurantCard extends Component 
  render() 
    return (
      
      <View style=styles.container>
        display()
      </View>
      
      
    );
  

但我收到以下错误：

未定义不是一个对象（评估'_this.props.navigation'）

我做错了什么？

【问题讨论】：

在这里进行真正的盲刺，但在function display() 下方输入const that = this 之类的内容，然后将您的onPress 更改为that.props.navi....

【参考方案1】：

您可以将this 作为参数传递给map 函数，如文档中所述：https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Array/map

function display() 
  
  return restaurant.map((item) => 
    return(
      <TouchableHighlight onPress=() => this.props.navigation.navigate('Restaurant')>
        <View style=styles.card>
          <View style=styles.cardHeadText>
            <Text style=styles.title>
               item.name 
            </Text>
            <Text>
               item.type 
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  , this); // over here

【参考方案2】：

你可以试试 :) 我已经将导航作为显示功能中的道具传递，将其破坏并重新用作访问 this.props.navigation 的简短方法。..

提取handler 中的点击逻辑使其易于阅读和控制，您可以更轻松地添加验证和其他内容。

function display(props) 
  const  navigation  = props

  const handlerClick = (item) => 
      /*
         all the content of item (name, and type) will be passed in
         props of the other page component
      */
      navigation.navigate("Restaurant",  ...item)
  

  return restaurant.map((item) => 
    return(
      <TouchableHighlight onPress=() => handlerClick(item)>
        <View style=styles.card>
          <View style=styles.cardHeadText>
            <Text style=styles.title>
               item.name 
            </Text>
            <Text>
               item.type 
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  );


class RestaurantCard extends Component 
  render() 
    return (
      <View style=styles.container>
        display(this.props.navigation)
      </View>
    );