在react native中从一个屏幕到另一个屏幕检索数据

在React Native中，从一个屏幕到另一个屏幕检索数据通常涉及使用导航库（如React Navigation）来管理屏幕之间的跳转，并通过状态管理或参数传递来共享数据。

基础概念

导航库：React Navigation是React Native中最流行的导航解决方案，它允许你在不同的屏幕之间进行导航。
状态管理：可以使用React的Context API、Redux或其他状态管理库来跨组件共享状态。
参数传递：在导航时，可以通过URL参数、查询参数或状态对象将数据从一个屏幕传递到另一个屏幕。

类型

参数传递：直接在导航时传递数据。
全局状态管理：使用Redux或Context API来管理全局状态。
本地存储：使用AsyncStorage或其他本地存储解决方案来持久化数据。

应用场景

表单提交：用户在第一个屏幕填写表单，然后在第二个屏幕查看提交的数据。
用户认证：在登录后，将用户信息传递到主屏幕。
列表详情：从列表项点击进入详情页，传递列表项的数据。

示例代码

使用React Navigation传递参数

// 导航到另一个屏幕并传递参数
navigation.navigate('SecondScreen', { itemId: 86, otherParam: 'anything you want here' });

// 在目标屏幕中获取参数
const { itemId, otherParam } = route.params;

使用Redux进行全局状态管理

首先，安装Redux及相关库：

npm install redux react-redux @reduxjs/toolkit

创建一个简单的Redux store：

// store.js
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

const store = configureStore({
  reducer: rootReducer,
});

export default store;

定义一个reducer：

// dataSlice.js
import { createSlice } from '@reduxjs/toolkit';

export const dataSlice = createSlice({
  name: 'data',
  initialState: {
    value: null,
  },
  reducers: {
    setData: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const { setData } = dataSlice.actions;
export default dataSlice.reducer;

在组件中使用Redux：

// FirstScreen.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { setData } from './dataSlice';

const FirstScreen = () => {
  const dispatch = useDispatch();

  const handlePress = () => {
    dispatch(setData('Some data'));
  };

  return (
    <Button title="Send Data" onPress={handlePress} />
  );
};

export default FirstScreen;

在另一个屏幕中读取数据：

// SecondScreen.js
import React from 'react';
import { useSelector } from 'react-redux';

const SecondScreen = () => {
  const data = useSelector(state => state.data.value);

  return (
    <Text>{data}</Text>
  );
};

export default SecondScreen;