我如何在本机反应中从 Flatlist 传递项目数据

Question

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

我从 lists.js 导入到我的 App.js。 它工作正常。

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

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

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

那么如何使用从另一个文件导入的 ListView 执行此操作。

这就是我的代码的结构

应用程序.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.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>
    );
  }
}

Answer 1

您可以执行以下操作

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

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

并像下面这样使用

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