如何将Lightbox中的值传递至React Native父组件？

当然可以实现！在Wix的React Native Navigation中，Lightbox和父组件（比如你的profile.js）之间传递TextInput的值其实有几种很实用的方案，我给你拆解两种最常用的：

方法一：通过回调函数传递数据 #

这是最直接的方案，核心思路是在打开Lightbox时，把父组件的状态更新函数作为回调传递给Lightbox，当用户在Lightbox中完成输入并点击保存时，调用这个回调把新值传回父组件。

步骤1：在profile.js中定义回调并打开Lightbox #

// profile.js
import React, { useState } from 'react';
import { TouchableOpacity, Text, View, StyleSheet } from 'react-native';
import { Navigation } from 'react-native-navigation';

const ProfileScreen = () => {
  const [userInfo, setUserInfo] = useState({ 
    name: 'John Doe', 
    bio: '热爱React Native的开发者' 
  });

  // 接收Lightbox传回的新数据并更新状态
  const handleProfileUpdate = (newInfo) => {
    setUserInfo(prev => ({ ...prev, ...newInfo }));
    Navigation.dismissLightBox(); // 保存后关闭Lightbox
  };

  // 打开编辑资料的Lightbox
  const openEditLightbox = () => {
    Navigation.showLightBox({
      screen: 'EditProfileLightbox', // 你注册的Lightbox组件名称
      passProps: {
        currentInfo: userInfo, // 传递当前资料作为输入框默认值
        onSave: handleProfileUpdate // 传递回调函数
      },
      style: {
        backgroundBlur: 'dark',
        backgroundColor: 'rgba(0,0,0,0.6)',
        tapBackgroundToDismiss: true
      }
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.label}>用户名：{userInfo.name}</Text>
      <Text style={styles.label}>个人简介：{userInfo.bio}</Text>
      <TouchableOpacity style={styles.editBtn} onPress={openEditLightbox}>
        <Text style={styles.btnText}>编辑资料</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, justifyContent: 'center', gap: 15 },
  label: { fontSize: 16 },
  editBtn: { backgroundColor: '#2196F3', padding: 12, borderRadius: 8, marginTop: 20 },
  btnText: { color: 'white', textAlign: 'center', fontSize: 16 }
});

export default ProfileScreen;

步骤2：在Lightbox组件中调用回调传递数据 #

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

const EditProfileLightbox = ({ passProps }) => {
  // 用父组件传递的当前资料初始化输入框
  const [name, setName] = useState(passProps.currentInfo.name);
  const [bio, setBio] = useState(passProps.currentInfo.bio);

  const handleSave = () => {
    // 调用父组件的回调，把新输入的值传回去
    passProps.onSave({ name, bio });
  };

  return (
    <View style={styles.lightboxContainer}>
      <TextInput
        style={styles.input}
        placeholder="请输入用户名"
        value={name}
        onChangeText={setName}
      />
      <TextInput
        style={styles.input}
        placeholder="请输入个人简介"
        value={bio}
        onChangeText={setBio}
        multiline
        numberOfLines={4}
      />
      <View style={styles.btnGroup}>
        <TouchableOpacity style={styles.saveBtn} onPress={handleSave}>
          <Text style={styles.btnText}>保存</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.cancelBtn} onPress={() => Navigation.dismissLightBox()}>
          <Text style={styles.btnText}>取消</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  lightboxContainer: {
    margin: 20,
    padding: 25,
    backgroundColor: 'white',
    borderRadius: 12
  },
  input: {
    borderBottomWidth: 1,
    borderColor: '#eee',
    padding: 10,
    marginBottom: 15,
    fontSize: 16
  },
  btnGroup: { flexDirection: 'row', gap: 10, marginTop: 20 },
  saveBtn: { flex: 1, backgroundColor: '#2196F3', padding: 12, borderRadius: 8 },
  cancelBtn: { flex: 1, backgroundColor: '#9E9E9E', padding: 12, borderRadius: 8 },
  btnText: { color: 'white', textAlign: 'center', fontSize: 16 }
});

export default EditProfileLightbox;

方法二：使用全局状态管理（如Context API/Redux） #

如果你的应用需要在多个组件中共享用户资料，全局状态管理会更高效。这里以React的Context API为例：

步骤1：创建Profile Context #

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

const ProfileContext = createContext();

export const ProfileProvider = ({ children }) => {
  const [userInfo, setUserInfo] = useState({ 
    name: 'John Doe', 
    bio: '热爱React Native的开发者' 
  });

  const updateUserInfo = (newInfo) => {
    setUserInfo(prev => ({ ...prev, ...newInfo }));
  };

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

export const useProfile = () => useContext(ProfileContext);

步骤2：在profile.js中使用Context #

// profile.js
import { useProfile } from './ProfileContext';

const ProfileScreen = () => {
  const { userInfo } = useProfile();

  const openEditLightbox = () => {
    Navigation.showLightBox({
      screen: 'EditProfileLightbox',
      style: { /* 样式配置 */ }
    });
  };

  // 渲染逻辑和之前一致，直接使用userInfo即可
};

步骤3：在Lightbox中更新全局状态 #

// EditProfileLightbox.js
import { useProfile } from './ProfileContext';

const EditProfileLightbox = () => {
  const { userInfo, updateUserInfo } = useProfile();
  const [name, setName] = useState(userInfo.name);
  const [bio, setBio] = useState(userInfo.bio);

  const handleSave = () => {
    updateUserInfo({ name, bio });
    Navigation.dismissLightBox();
  };

  // 渲染逻辑和之前一致
};

方案选择建议 #

• 如果只是简单的Lightbox和父组件传值，回调函数足够轻便，不需要额外依赖。
• 如果用户资料需要在多个页面/组件中共享，全局状态管理会让状态维护更清晰。

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