如何将lightBox中的TextInput值传递给父组件？

嘿，我来帮你搞定这个把LightBox里的输入内容传回父组件的问题～针对Wix React Native Navigation的LightBox，有几种实用的方法，我给你详细说说：

这是最简单的方案，父组件打开LightBox时传入一个回调函数，编辑页面完成修改后调用这个回调把数据传回去，再关闭LightBox。

父组件代码（打开LightBox部分） #

// 假设这是你的个人资料父组件
import { Navigation } from 'react-native-navigation';
import { TouchableOpacity, Text, View } from 'react-native';
import React, { useState } from 'react';

const ProfileScreen = ({ componentId }) => {
  // 父组件保存资料状态
  const [profile, setProfile] = useState({
    name: 'Hafizi',
    email: 'example@mail.com'
  });

  const openEditProfileLightBox = () => {
    Navigation.showLightBox({
      screen: 'EditProfileScreen', // 你的编辑页面路由名称
      passProps: {
        // 传入回调函数，接收更新后的资料
        onSaveProfile: (updatedData) => {
          setProfile(updatedData);
          console.log('父组件收到更新后的资料:', updatedData);
        },
        // 还可以把当前的资料传过去，让编辑页面默认填充
        currentProfile: profile
      }
    });
  };

  return (
    <View style={{ padding: 20, justifyContent: 'center' }}>
      <Text>姓名：{profile.name}</Text>
      <Text>邮箱：{profile.email}</Text>
      <TouchableOpacity 
        onPress={openEditProfileLightBox}
        style={{ marginTop: 20, backgroundColor: '#eee', padding: 10 }}
      >
        <Text>编辑资料</Text>
      </TouchableOpacity>
    </View>
  );
};

export default ProfileScreen;

编辑页面（LightBox组件）代码 #

// EditProfileScreen.js
import { Navigation } from 'react-native-navigation';
import { View, TextInput, Button, StyleSheet } from 'react-native';
import React, { useState } from 'react';

const EditProfileScreen = ({ componentId, passProps }) => {
  // 用父组件传过来的当前资料初始化输入框
  const [name, setName] = useState(passProps.currentProfile.name);
  const [email, setEmail] = useState(passProps.currentProfile.email);

  const handleSave = () => {
    // 整理更新后的资料
    const updatedProfile = { name, email };
    // 调用父组件的回调，传递数据
    passProps.onSaveProfile(updatedProfile);
    // 关闭LightBox
    Navigation.dismissLightBox(componentId);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="请输入姓名"
        value={name}
        onChangeText={setName}
      />
      <TextInput
        style={styles.input}
        placeholder="请输入邮箱"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
      />
      <Button title="保存修改" onPress={handleSave} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: 'white',
    borderRadius: 10,
    marginHorizontal: 20,
    marginTop: 'auto',
    marginBottom: 'auto'
  },
  input: {
    borderBottomWidth: 1,
    borderColor: '#ccc',
    marginBottom: 15,
    paddingVertical: 8
  }
});

export default EditProfileScreen;

如果你的应用有很多组件需要共享用户资料，用Redux、React Context这类全局状态工具会更方便。这里以React Context为例：

1. 创建Profile Context #

// ProfileContext.js
import React, { createContext, useState, useContext } from 'react';

const ProfileContext = createContext();

export const ProfileProvider = ({ children }) => {
  const [profile, setProfile] = useState({
    name: '',
    email: ''
  });

  // 更新资料的方法
  const updateProfile = (newData) => {
    setProfile(prev => ({ ...prev, ...newData }));
  };

  return (
    <ProfileContext.Provider value={{ profile, updateProfile }}>
      {children}
    </ProfileContext.Provider>
  );
};

// 自定义Hook，方便组件使用
export const useProfile = () => useContext(ProfileContext);

2. 在父组件中使用Context #

// ProfileScreen.js
import { useProfile } from './ProfileContext';
// ...其他导入

const ProfileScreen = ({ componentId }) => {
  const { profile } = useProfile();

  const openEditLightBox = () => {
    Navigation.showLightBox({
      screen: 'EditProfileScreen'
    });
  };

  // 渲染部分和之前类似，直接用profile里的数据
};

3. 编辑页面更新全局状态 #

// EditProfileScreen.js
import { useProfile } from './ProfileContext';
// ...其他导入

const EditProfileScreen = ({ componentId }) => {
  const { profile, updateProfile } = useProfile();
  const [name, setName] = useState(profile.name);
  const [email, setEmail] = useState(profile.email);

  const handleSave = () => {
    updateProfile({ name, email });
    Navigation.dismissLightBox(componentId);
  };

  // 渲染输入框和按钮...
};

你也可以在父组件里监听LightBox关闭的事件，然后获取传递的参数：

父组件中监听事件 #

// ProfileScreen.js
import { useEffect } from 'react';
import { Navigation } from 'react-native-navigation';

const ProfileScreen = ({ componentId }) => {
  const [profile, setProfile] = useState({});

  useEffect(() => {
    // 注册LightBox关闭的监听
    const subscription = Navigation.events().registerLightBoxDismissedListener((event) => {
      // 检查关闭的是不是编辑页面
      if (event.componentId.includes('EditProfileScreen')) {
        // 获取传递的更新数据
        const updatedData = event.passProps;
        setProfile(updatedData);
      }
    });

    // 组件卸载时移除监听
    return () => subscription.remove();
  }, []);

  // ...打开LightBox的代码
};

编辑页面关闭时传递参数 #

// EditProfileScreen.js
const handleSave = () => {
  const updatedProfile = { name, email };
  // 关闭时传递参数
  Navigation.dismissLightBox(componentId, updatedProfile);
};

个人推荐第一种方法，简单直接，不需要额外的状态管理依赖，适合大多数场景～

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