如何在兩個組件之間傳遞資料，ReactNative

我是React Native的初學者。我試圖在我的應用程式中的兩個組件之間傳遞資料。我有兩個組件 - Home.js 和 MyModal.js.

在第一個組件--Home.js中，我有一個包含一些資料的陣列和FlatList組件。Home.js 在我的應用程式中正確顯示資料。 此外，在home.js中，當用戶點擊TouchableOpacity組件中的卡片時，我試圖顯示Modal：

 <TouchableOpacity onPress={（）=>  <MyModal /> }>
<Card>< <Card> </TouchableOpacity>

在第二個組件--MyModal.js--中，我試圖從home.js中顯示資料/item.title/和/item.body/

下面是所有的代碼：

import React, { useState } from "react"。
import {StyleSheet, View, Text,FlatList,TouchableOpacity}。from "react-native"/span>。
import Card from "./components/card"。
import MyModal from "./components/myModal" 


function Home({ navigation }) {
  const [reviews, setReviews] = useState（[
    {
      body: "lorem ipsum"。
      key: " 1",
      title: "花"。
    },
    {
      key: "2",
      title: "兩朵花"。
  
      body: "lorem ipsum"。
    }
  ]);

  return (
    <View style=>/span>
     
      <FlatList。
        data={reviews}。
        renderItem={({ item }) =>/span> (
          <TouchableOpacity onPress={（）/span> =>  <MyModal /> }>
            <Card>
              <Text>{item.title}</Text>/span>
              <Text>{item.body}</Text> 
            </Card>/span>
          </TouchableOpacity>/span>
        )}
      />
    </View>>
  );
}

myModal.js

import React from "react";
import { View, Text, Button, StyleSheet } from "react-native"。
import Card from "./components/card"。

export default function MyModal（{ route, navigation }） {

  return (
    <View> 
      <Card>/span>
        <Text>/span>{data.title}</Text>
        <Text>/span>{data.body}</Text>/span>
      </Card>/span>
    </View>
  );
}

以下是我想顯示的例子：

點擊前的Home.js。

點擊后的螢屏（用home.js的資料打開MyModal.js）。

這里是codeandbox。 https://codesandbox.io/s/youthful-fermat-lui4g

如果有任何建議，我將不勝感激

 <View style={styles.container}>
   
    <FlatList。
      data={reviews}。
      renderItem={({ item }) =>/span> (
        <TouchableOpacity onPress=props. navigation.push('nameOfRouteModal', 
          itemToPast）>
          <Card> 
            <Text>/span>{item.title}</Text>
            <Text>{item.body}</Text> 
          </Card>/span>
        </TouchableOpacity>/span>
      )}
    /> )。
  </View>
);
}

export default function MyModal（{ route, navigation }） {
const routeParams = route.params;
return (
  <View> 
    <Card>/span>
      <Text>/span>{routeParams.title}</Text>
      <Text>{routeParams.body}</Text> 
    </Card>/span>
  </View>
);
}

uj5u.com熱心網友回復：

聽到的是你可以傳遞資料的其他組件的方式，如下方式

<NavigationContainer>
    <Stack.Navigator initialRouteName="Home">/span>
        <Stack.Screen options={{ headerShown: false }}. name="Home"/span> component= 
        {HomeScreen} />
        <Stack. Screen name="Gallery" component={GalleryScreen} />
        <Stack. Screen name="Settings" component={SettingsScreen} /> component= />
        <Stack.Screen name="GalleryDetails" >。
            component={GalleryDetailsScreen}
        />
    </Stack.Navigator>/span>

Than Class Where Your used Navigation My Code Gallery

const gallery =（）=> {
const navigation = useNavigation();

}

 navigation.navigate('GalleryDetails', { imageURI(Key) 。
              item.node.image.uri(Value)}）。) 

聽到GalleryDetails我抓取的資料如下

uj5u.com熱心網友回復：

就像這樣做：

 function Home（{ navigation }） {
//取一個默認為null的狀態，當一個記錄被點擊時，它將被更新。 并//將它傳遞給模態，如下所示 
const [currentReview , setCurrentView] = useState(null)
  const [reviews, setReviews] = useState([
    {
      body: "lorem ipsum"。
      key: " 1",
      title: "花"。
    },
    {
      key: "2",
      title: "兩朵花"。
  
      body: "lorem ipsum"。
    }
  ]);

  return (
    <View style=>/span>
     
      <FlatList。
        data={reviews}。
        renderItem={({ item }) =>/span> (
          <TouchableOpacity onPress={（）/span> =>  {setCuurentReview(item); <MyModal。
          currentReview={currenReview} />}>
            <Card> 
              <Text>{item.title}</Text>/span>
              <Text>{item.body}</Text> 
            </Card>/span>
          </TouchableOpacity>/span>
        )}
      />
    </View>>
  );
}

然后這樣抓：

 export default function MyModal({ route, navigation, currentReview }) {

  return (
    <View> 
      <Card>/span>
        <Text>/span>{data.title}</Text>
        <Text>/span>{data.body}</Text>/span>
      </Card>/span>
    </View>
  );
}

標籤：

上一篇：AzureCognitiveSearch：按特定的結果字串對結果進行排序

下一篇：使用pandas將階段性的虛擬變數轉換為顯示跳過的階段的df