如何使用 React Native 中的數據導航到下一個屏幕

Question

我是 React Native 應用程序開發的新手。 我有問題是我也嘗試使用數據（字符串和圖像）導航到第一個屏幕到第二個屏幕。 但會嘗試導航錯誤。 錯誤是未定義導航。 請解決我的問題並編輯我的代碼。 我附上了我的代碼供您參考。

    import React from 'react';
    import { StyleSheet, Text, View, FlatList, Image, TouchableOpacity } from 'react-native';
function Item({ item }) {
  return (
    <View style={styles.listItem}>
      <Image source={{uri:item.photo}}  style={{width:60, height:60,borderRadius:30}} />
      <View style={{alignItems:"center",flex:1}}>
        <Text style={{fontWeight:"bold"}}>{item.name}</Text>
        <Text>{item.position}</Text>
      </View>
      <TouchableOpacity 
      onPress={() => getItem(item)}
      style={{height:50,width:50, justifyContent:"center",alignItems:"center"}}>
        <Text style={{color:"green"}}>Call</Text>
      </TouchableOpacity>
    </View>
  );
}
 const getItem = (item) => {
    // Function for click on an item
    alert('Id : ' + item.id + ' Title : ' + item.position);
  };
  
 const getpress=(item)=> {
    this.props.navigation.navigate('SecondPage', {
      itemId: item.name,
      title: item.position.rendered,
    });
  }


export default class FirstPage extends React.Component {
  state = {
    data:[
        {
            "name": "Miyah Myles",
            "email": "miyah.myles@gmail.com",
            "position": "Data Entry Clerk",
            "photo": "https:\/\/images.unsplash.com\/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
        },
        {
            "name": "June Cha",
            "email": "june.cha@gmail.com",
            "position": "Sales Manager",
            "photo": "https:\/\/randomuser.me\/api\/portraits\/women\/44.jpg"
        }
    ]
  }

  render(){
    //const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={()=>navigate('SecondPage')}>
        <FlatList
          style={{flex:1}}
          data={this.state.data}
          renderItem={({ item }) => <Item item={item}/>}
          keyExtractor={item => item.email}
        />
        </TouchableOpacity>
      </View>
    );
  } 
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F7F7F7',
    marginTop:60
  },
  listItem:{
    margin:10,
    padding:10,
    backgroundColor:"#FFF",
    width:"80%",
    flex:1,
    alignSelf:"center",
    flexDirection:"row",
    borderRadius:5
  }
});

Answer 1

我假設您想要在 Flatlist 項目按下參數時導航到第二頁。 所以不要將完整的平面列表放在 Touchable 中，盡管只用 Touchable 包裝 Item 並將 onPress 作為道具傳遞給父級的 Item。

這是代碼：

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Image,
  TouchableOpacity,
} from 'react-native';

function Item({item, onPress}) {
  return (
    <View style={styles.listItem}>
      <Image
        source={{uri: item.photo}}
        style={{width: 60, height: 60, borderRadius: 30}}
      />
      <View style={{alignItems: 'center', flex: 1}}>
        <Text style={{fontWeight: 'bold'}}>{item.name}</Text>
        <Text>{item.position}</Text>
      </View>
      <TouchableOpacity
        onPress={() => onPress(item)}
        style={{
          height: 50,
          width: 50,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text style={{color: 'green'}}>Call</Text>
      </TouchableOpacity>
    </View>
  );
}
const getItem = item => {
  // Function for click on an item
  alert('Id : ' + item.id + ' Title : ' + item.position);
};

export default class FirstPage extends React.Component {
  state = {
    data: [
      {
        name: 'Miyah Myles',
        email: 'miyah.myles@gmail.com',
        position: 'Data Entry Clerk',
        photo:
          'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6',
      },
      {
        name: 'June Cha',
        email: 'june.cha@gmail.com',
        position: 'Sales Manager',
        photo: 'https://randomuser.me/api/portraits/women/44.jpg',
      },
    ],
  };

  getpress = item => {
    this.props.navigation.navigate('SecondPage', {
      itemId: item.name,
      title: item.position.rendered,
    });
  };

  render() {
    //const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <FlatList
          style={{flex: 1}}
          data={this.state.data}
          renderItem={({item}) => <Item item={item} onPress={this.getpress} />}
          keyExtractor={item => item.email}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F7F7F7',
    marginTop: 60,
  },
  listItem: {
    margin: 10,
    padding: 10,
    backgroundColor: '#FFF',
    width: '80%',
    flex: 1,
    alignSelf: 'center',
    flexDirection: 'row',
    borderRadius: 5,
  },
});

Answer 2

在你的第一頁：

const getpress = (item) => {
        this.props.navigation.navigate('SecondPage', {
          itemId: item.name,
          title: item.position.rendered
        });
      }

在你的第二頁：

function SecondPage({ route, navigation }) {
      const { itemId, title } = route.params;
      return (
         //...
      );
    }