Javascript 如何在react native中传递Flatlist中的项目数据

我是新来的。我有一个包含主代码的App.js页面和另一个包含列表本身的文件夹中的lists.js页面

我从lists.js导入我的App.js。它很好用

我正在尝试为listItems设置一个onPress操作，该操作还向下一页发送一个唯一的ID，我可以使用该ID调用新页中的项目

为清楚起见，如果我使用普通按钮执行此操作，它将如下所示：

this.props.navigation.navigate('NextPage', { Email: UserEmail });

那么，如何使用从另一个文件导入的ListView来实现这一点呢

这就是我的代码的结构

App.js

import MarketList from './lists/markets';

class ProfileActivity extends Component
{

   static navigationOptions =
   {
      title: 'Home',
      headerStyle : {
        backgroundColor: '#00b47a'
      },
      headerTitleStyle: {
        color: 'white'
      },
      headerLeft: null,
      headerRight: (
        <Icon containerStyle={{ paddingRight: 15 }}
        color='#000' onPress={()=> navigation.getParam('openBottomSheet')()}
        name="menu" />
      )
   };

   constructor () {
    super()
    this.state = { toggled: false }
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <MarketList />
      </View>
    );
  }
}            

从“/lists/markets”导入MarketList；
类ProfileActivity扩展组件
{
静态导航选项=
{
标题:"家",，
头型：{
背景颜色：“#00b47a”
},
头饰样式：{
颜色：“白色”
},
headerLeft:null，
头灯：(
navigation.getParam（'openBottomSheet'）（）}
name=“菜单”/>
)
};
构造函数（）{
超级（）
this.state={toggled:false}
}
render（）{
返回(
);
}
}            

mylists.js

export default class MarketList extends React.Component {
  constructor(props) {
 
    super(props)
 
    this.state = {
      items: '',
    };
  }

  render() {
    fetch('https://example.php')
    .then((response) => response.json())
    .then((json) => {
      this.setState({
        items: json.items,
      })
    })
    .catch((error) => {
      console.error(error);
    });
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.items}
          renderItem={({item}) => <TouchableOpacity onPress={} style={styles.itemList}><View style={styles.item}><Text style={styles.market}>{item.name}</Text><Text style={styles.location}>{item.Location}</Text></View><View style={styles.go}><Icon name="arrow-right" color="#00b47a" /></View></TouchableOpacity>}
        />
      </View>
    );
  }
}

导出默认类MarketList扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
项目：“”，
};
}
render（）{
取（'https://example.php')
.then（（response）=>response.json（））
。然后（（json）=>{
这是我的国家({
items:json.items，
})
})
.catch（（错误）=>{
控制台错误（error）；
});
返回(
{item.name}{item.Location}
/>
);
}
}

您可以执行以下操作

renderItem={({item}) => <TouchableOpacity onPress={()=>this.props.navigation.navigate("pagename",{item:item})}

将导航作为道具传递给MarketList组件

  <MarketList navigation={this.props.navigation}/>

并使用如下所示

renderItem={({item}) => <TouchableOpacity onPress={()=>this.props.navigation.navigate("pagename",{item:item})}

renderItem={（{item}）=>this.props.navigation.navigate（“pagename”，{item:item}）}

非常感谢