React Native中如何在两个.js文件共享数据？AsyncStorage可行吗？

首先得明确：你代码里的ttSelectedItem是yks组件的state属性，不是全局变量，所以直接在另一个文件里拿不到。下面分两种场景给你解决方案：

一、不需要持久化（仅组件间实时共享） #

如果只是想让另一个组件实时获取当前选中的值，不需要APP重启后保留，推荐这几种方法：

1. 状态提升（Lifting State Up） #

这是React最基础的跨组件共享状态的方式：

• 把ttSelectedItem移到yks和目标组件的共同父组件的state里
• 父组件把状态和更新状态的方法通过props传给yks组件
• 当yks里的picker变化时，调用父组件的方法更新父state
• 目标组件通过props从父组件拿到最新的ttSelectedItem

示例代码（父组件）：

import YksComponent from './yks';
import TargetComponent from './TargetComponent';

class ParentComponent extends Component {
  state = {
    ttSelectedItem: 20
  };

  updateSelectedItem = (index) => {
    this.setState({ ttSelectedItem: index });
  };

  render() {
    return (
      <View>
        <YksComponent 
          selectedItem={this.state.ttSelectedItem}
          onItemChange={this.updateSelectedItem}
        />
        <TargetComponent selectedItem={this.state.ttSelectedItem} />
      </View>
    );
  }
}

然后修改yks组件的props接收和回调：

// yks组件的constructor
constructor(props) {
  super(props);
  this.state = {
    itemList: numberList,
  };
}

// 修改onPickerSelect
onPickerSelect (index) {
  this.props.onItemChange(index);
}

// render里的Picker
<Picker 
  style={{width: "100%", height: "100%"}} 
  selectedValue={this.props.selectedItem} 
  onValueChange={(index) => this.onPickerSelect(index)}
>
  {/* ...PickerItem部分不变 */}
</Picker>

2. 使用React Context #

如果组件层级比较深，传递props太麻烦，用Context更高效：

• 创建一个Context文件（比如SelectedItemContext.js）

import React from 'react';

const SelectedItemContext = React.createContext(20); // 默认值

export const SelectedItemProvider = SelectedItemContext.Provider;
export const SelectedItemConsumer = SelectedItemContext.Consumer;
export default SelectedItemContext;

• 在yks的父组件（或者根组件）用SelectedItemProvider包裹，提供状态和更新方法

import { SelectedItemProvider } from './SelectedItemContext';

class RootComponent extends Component {
  state = {
    ttSelectedItem: 20,
    updateSelectedItem: (index) => {
      this.setState({ ttSelectedItem: index });
    }
  };

  render() {
    return (
      <SelectedItemProvider value={this.state}>
        {/* 这里放yks组件和目标组件 */}
      </SelectedItemProvider>
    );
  }
}

• 在yks组件里消费Context来获取状态和更新方法

import SelectedItemContext from './SelectedItemContext';

class yks extends Component {
  static contextType = SelectedItemContext;

  onPickerSelect (index) {
    this.context.updateSelectedItem(index);
  }

  render() {
    return (
      <Picker 
        style={{width: "100%", height: "100%"}} 
        selectedValue={this.context.ttSelectedItem} 
        onValueChange={(index) => this.onPickerSelect(index)}
      >
        {/* ...PickerItem部分不变 */}
      </Picker>
    );
  }
}

• 在另一个组件里消费Context获取值

import SelectedItemContext from './SelectedItemContext';

class TargetComponent extends Component {
  static contextType = SelectedItemContext;

  render() {
    return (
      <Text>当前选中值：{this.context.ttSelectedItem}</Text>
    );
  }
}

3. 状态管理库（Redux/MobX） #

如果你的项目比较复杂，有很多跨组件共享的状态，推荐用Redux或者MobX，它们能统一管理全局状态，组件可以订阅状态变化。

二、使用AsyncStorage持久化（APP重启后仍保留值） #

AsyncStorage是React Native的本地存储方案，能把值存在设备本地，完全可以解决你的问题，但它是异步操作，需要注意处理异步逻辑：

步骤1：安装AsyncStorage（RN 0.60+需要单独安装） #

npm install @react-native-async-storage/async-storage
# 或者用yarn
yarn add @react-native-async-storage/async-storage

步骤2：在yks组件里存储选中值 #

修改onPickerSelect方法，在状态更新后把值存到AsyncStorage：

import AsyncStorage from '@react-native-async-storage/async-storage';

// ...其他代码

onPickerSelect (index, selectedItem) {
  this.setState({
    [selectedItem]: index,
  }, async () => {
    // 状态更新完成后异步存储
    try {
      await AsyncStorage.setItem('ttSelectedItem', index.toString());
    } catch (error) {
      console.error('存储选中值失败：', error);
    }
  });
}

步骤3：在另一个组件里读取存储的值 #

因为是异步操作，需要在组件挂载时读取，比如类组件用componentDidMount，函数组件用useEffect：

类组件示例：

import AsyncStorage from '@react-native-async-storage/async-storage';

class TargetComponent extends Component {
  state = {
    ttSelectedItem: 20 // 默认值
  };

  async componentDidMount() {
    try {
      const storedValue = await AsyncStorage.getItem('ttSelectedItem');
      if (storedValue !== null) {
        // 把字符串转成数字
        this.setState({ ttSelectedItem: parseInt(storedValue) });
      }
    } catch (error) {
      console.error('读取选中值失败：', error);
    }
  }

  render() {
    return (
      <Text>从本地读取的选中值：{this.state.ttSelectedItem}</Text>
    );
  }
}

函数组件示例：

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState, useEffect } from 'react';

function TargetComponent() {
  const [ttSelectedItem, setTtSelectedItem] = useState(20);

  useEffect(() => {
    const loadStoredValue = async () => {
      try {
        const storedValue = await AsyncStorage.getItem('ttSelectedItem');
        if (storedValue !== null) {
          setTtSelectedItem(parseInt(storedValue));
        }
      } catch (error) {
        console.error('读取选中值失败：', error);
      }
    };

    loadStoredValue();
  }, []);

  return (
    <Text>从本地读取的选中值：{ttSelectedItem}</Text>
  );
}

需要注意的是：

• AsyncStorage存储的是字符串，所以存的时候要转成字符串，取的时候要转成对应类型（比如数字）
• 如果需要实时监听值的变化，AsyncStorage本身没有监听机制，这时候可以结合Context或者状态管理库，在存储的同时更新全局状态，这样另一个组件就能实时拿到最新值

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