React Native如何在Home与MyModal两个组件之间传递数据

核心问题梳理 #

• 你当前在onPress回调中返回<MyModal />的写法完全无效：JSX必须挂载到组件渲染树中才会渲染，事件回调返回的JSX不会触发任何视图更新，弹窗根本不会弹出。
• 没有给MyModal组件传递点击的对应item数据，也没有控制弹窗显隐的状态变量。
• 你当前的MyModal组件没有使用React Native内置的Modal组件包裹，本身不具备弹窗悬浮的能力。
• 你提供的Home代码末尾漏了组件导出逻辑，会导致导入报错。

方案1：Home组件内嵌Modal（最简单的实现方式） #

第一步 修改Home.js代码 #

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


function Home({ navigation }) {
  const [reviews, setReviews] = useState([
    {
      body: "lorem ipsum",
      key: " 1",
      title: "Flower",
    },
    {
      key: "2",
      title: "Two flowers",
      body: "lorem ipsum",
    }
  ]);
  // 新增两个状态：控制弹窗显隐、存储当前选中的评论
  const [modalVisible, setModalVisible] = useState(false);
  const [selectedReview, setSelectedReview] = useState(null);

  return (
    <View style={styles.container}>
      <FlatList
        data={reviews}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => {
            setSelectedReview(item);
            setModalVisible(true);
          }}>
            <Card>
              <Text>{item.title}</Text>
              <Text>{item.body}</Text>
            </Card>
          </TouchableOpacity>
        )}
      />
      {/* 把Modal放到组件树里，传入必要参数 */}
      <MyModal 
        visible={modalVisible}
        review={selectedReview}
        onClose={() => setModalVisible(false)}
      />
    </View>
  );
}
// 补上组件导出
export default Home;

第二步 修改MyModal.js代码 #

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

// 接收父组件传的三个参数
export default function MyModal({ visible, review, onClose }) {
  // 没有选中评论的时候不渲染内容
  if (!review) return null;
  return (
    <Modal visible={visible} animationType="slide">
      <View style={styles.modalContainer}>
        <Card>
          <Text>{review.title}</Text>
          <Text>{review.body}</Text>
          <Button title="关闭弹窗" onPress={onClose} />
        </Card>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  }
})

方案2：React Navigation 模态路由方案（如果你已经配置了路由） #

如果你是把MyModal配置成了React Navigation的模态路由页，修改如下即可：

1. Home.js里的onPress改成：

<TouchableOpacity onPress={() => {
  navigation.navigate('MyModal', {
    title: item.title,
    body: item.body
  })
}}>

2. MyModal.js里拿路由参数即可：

export default function MyModal({ route, navigation }) {
  const { title, body } = route.params;
  return (
    <View>
      <Card>
        <Text>{title}</Text>
        <Text>{body}</Text>
        <Button title="关闭" onPress={() => navigation.goBack()} />
      </Card>
    </View>
  );
}

内容的提问来源于stack exchange，提问作者MartynBrzoz