React Native（Expo Go）中如何在.tsx文件间传递已赋值的状态数据？

嘿，我来帮你搞定这个状态传递的问题～你说直接把变量导出到组件函数外面没法拿到更新后的值，这其实很正常——因为useState创建的状态是和组件实例绑定的，导出到外部的只是个初始空值，根本不会跟着组件内部的状态变化走。下面给你几种实用的解决方案，你可以根据自己的组件关系和项目复杂度来选：

1. Props传递（适合父子组件关系） #

如果两个.tsx文件是父子组件的关系，直接把状态和更新函数作为props传过去就最省事：

// 父组件 Parent.tsx
import { useState } from 'react';
import Child from './Child';

export default function Parent() {
  const [imageurl, setImageurl] = useState<string>('');

  // 模拟设置imageurl的逻辑，比如选择图片后赋值
  const handlePickImage = () => {
    setImageurl('https://example.com/my-selected-image.jpg');
  };

  return (
    <>
      <Button title="选择图片" onPress={handlePickImage} />
      {/* 把状态和更新函数传给子组件 */}
      <Child imageurl={imageurl} setImageurl={setImageurl} />
    </>
  );
}

// 子组件 Child.tsx
interface ChildProps {
  imageurl: string;
  setImageurl: (url: string) => void;
}

export default function Child({ imageurl, setImageurl }: ChildProps) {
  // 这里就能直接拿到最新的imageurl值，也能调用setImageurl更新状态
  return (
    <View>
      <Text>当前图片地址：{imageurl}</Text>
      <Button title="修改图片地址" onPress={() => setImageurl('https://example.com/new-image.jpg')} />
    </View>
  );
}

2. Context API（适合跨多层组件/非父子关系） #

如果组件之间隔了好几层，或者没有直接的父子关系，用Context API来共享状态就很合适：

// 先创建一个Context文件 ImageContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react';

// 定义Context的类型
interface ImageContextType {
  imageurl: string;
  setImageurl: (url: string) => void;
}

// 创建Context，初始值设为undefined
const ImageContext = createContext<ImageContextType | undefined>(undefined);

// 写一个Provider组件，用来包裹需要共享状态的组件树
export function ImageProvider({ children }: { children: ReactNode }) {
  const [imageurl, setImageurl] = useState<string>('');

  return (
    <ImageContext.Provider value={{ imageurl, setImageurl }}>
      {children}
    </ImageContext.Provider>
  );
}

// 写一个自定义Hook，简化Context的调用
export function useImageContext() {
  const context = useContext(ImageContext);
  if (!context) {
    throw new Error('useImageContext必须在ImageProvider内部使用哦');
  }
  return context;
}

然后在根组件（比如App.tsx）里用Provider包裹所有需要共享状态的组件：

// App.tsx
import { ImageProvider } from './ImageContext';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

export default function App() {
  return (
    <ImageProvider>
      <ComponentA />
      <ComponentB />
    </ImageProvider>
  );
}

之后在任何需要的组件里直接用自定义Hook获取状态：

// ComponentA.tsx（负责设置状态）
import { useImageContext } from './ImageContext';

export default function ComponentA() {
  const { setImageurl } = useImageContext();

  return (
    <Button title="设置图片地址" onPress={() => setImageurl('https://example.com/selected.jpg')} />
  );
}

// ComponentB.tsx（负责读取状态）
import { useImageContext } from './ImageContext';

export default function ComponentB() {
  const { imageurl } = useImageContext();

  return <Text>当前图片地址：{imageurl}</Text>;
}

3. 状态管理库（适合复杂大型应用） #

如果你的项目比较复杂，有很多组件需要共享状态，可以用 Zustand、Redux 这类状态管理库，这里举个Zustand的简单例子：

// 创建store文件 useImageStore.ts
import { create } from 'zustand';

interface ImageStore {
  imageurl: string;
  setImageurl: (url: string) => void;
}

export const useImageStore = create<ImageStore>((set) => ({
  imageurl: '',
  setImageurl: (url) => set({ imageurl: url }),
}));

然后在任意组件里使用：

// 任意组件.tsx
import { useImageStore } from './useImageStore';

export default function AnyComponent() {
  // 读取状态
  const imageurl = useImageStore((state) => state.imageurl);
  // 获取更新函数
  const setImageurl = useImageStore((state) => state.setImageurl);

  return (
    <>
      <Text>图片地址：{imageurl}</Text>
      <Button onPress={() => setImageurl('https://example.com/new-image.jpg')} title="更新图片" />
    </>
  );
}

简单总结一下：如果是简单的父子组件，用Props就够了；跨组件共享用Context；大型复杂项目就上状态管理库～

备注：内容来源于stack exchange，提问作者HzStark