React Native：实现createUserScreen与dashboardScreen间列表自动更新

方案1：React Context API（轻量首选） #

适合小型到中型应用，无需额外依赖，利用React内置能力实现全局状态共享。

1. 创建全局状态Context #

// src/context/ListContext.js
import React, { createContext, useState, useContext } from 'react';

const ListContext = createContext();

export function ListProvider({ children }) {
  const [userList, setUserList] = useState([]);

  // 生成1-80的列表方法
  const generateUserList = () => {
    const newList = Array.from({ length: 80 }, (_, i) => i + 1);
    setUserList(newList);
  };

  return (
    <ListContext.Provider value={{ userList, generateUserList }}>
      {children}
    </ListContext.Provider>
  );
}

// 自定义Hook简化调用
export function useList() {
  return useContext(ListContext);
}

2. 在根组件包裹Provider #

确保整个应用能访问Context状态：

// App.js
import { ListProvider } from './src/context/ListContext';
import { NavigationContainer } from '@react-navigation/native';
import MainStack from './src/navigation/MainStack';

export default function App() {
  return (
    <ListProvider>
      <NavigationContainer>
        <MainStack />
      </NavigationContainer>
    </ListProvider>
  );
}

3. 在CreateUserScreen触发列表生成 #

// src/screens/CreateUserScreen.js
import React from 'react';
import { View, Button } from 'react-native';
import { useList } from '../context/ListContext';
import { useNavigation } from '@react-navigation/native';

export default function CreateUserScreen() {
  const { generateUserList } = useList();
  const navigation = useNavigation();

  const handleGenerate = () => {
    generateUserList();
    navigation.navigate('Dashboard');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="生成1-80列表" onPress={handleGenerate} />
    </View>
  );
}

4. 在DashboardScreen渲染同步列表 #

// src/screens/DashboardScreen.js
import React from 'react';
import { View, FlatList, Text, StyleSheet } from 'react-native';
import { useList } from '../context/ListContext';

export default function DashboardScreen() {
  const { userList } = useList();

  return (
    <View style={styles.container}>
      <FlatList
        data={userList}
        keyExtractor={(item) => item.toString()}
        renderItem={({ item }) => (
          <Text style={styles.itemText}>编号：{item}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  itemText: { padding: 12, fontSize: 16, borderBottomWidth: 1, borderBottomColor: '#eee' }
});

方案2：Redux Toolkit（复杂应用首选） #

适合状态逻辑复杂、多页面共享状态的场景，提供更规范的状态管理流程。

1. 配置Redux Store #

// src/store/store.js
import { configureStore } from '@reduxjs/toolkit';
import listReducer from './slices/listSlice';

export const store = configureStore({
  reducer: { list: listReducer }
});

2. 创建List状态切片 #

// src/store/slices/listSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = { userList: [] };

const listSlice = createSlice({
  name: 'list',
  initialState,
  reducers: {
    generateUserList: (state) => {
      state.userList = Array.from({ length: 80 }, (_, i) => i + 1);
    }
  }
});

export const { generateUserList } = listSlice.actions;
export default listSlice.reducer;

3. 根组件包裹Redux Provider #

// App.js
import { Provider } from 'react-redux';
import { store } from './src/store/store';
import { NavigationContainer } from '@react-navigation/native';
import MainStack from './src/navigation/MainStack';

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <MainStack />
      </NavigationContainer>
    </Provider>
  );
}

4. CreateUserScreen触发状态更新 #

// src/screens/CreateUserScreen.js
import React from 'react';
import { View, Button } from 'react-native';
import { useDispatch } from 'react-redux';
import { generateUserList } from '../store/slices/listSlice';
import { useNavigation } from '@react-navigation/native';

export default function CreateUserScreen() {
  const dispatch = useDispatch();
  const navigation = useNavigation();

  const handleGenerate = () => {
    dispatch(generateUserList());
    navigation.navigate('Dashboard');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="生成1-80列表" onPress={handleGenerate} />
    </View>
  );
}

5. DashboardScreen获取并渲染列表 #

// src/screens/DashboardScreen.js
import React from 'react';
import { View, FlatList, Text, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';

export default function DashboardScreen() {
  const userList = useSelector(state => state.list.userList);

  return (
    <View style={styles.container}>
      <FlatList
        data={userList}
        keyExtractor={(item) => item.toString()}
        renderItem={({ item }) => (
          <Text style={styles.itemText}>编号：{item}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  itemText: { padding: 12, fontSize: 16, borderBottomWidth: 1, borderBottomColor: '#eee' }
});

关键注意事项 #

• 状态更新需遵循不可变原则：两种方案都避免直接修改原数组，确保React能检测到状态变化并触发重渲染。
• 空状态处理：可在DashboardScreen中添加空列表提示，比如userList.length === 0时显示"请先生成列表"。
• 导航时机：同步状态更新后直接跳转即可，若为异步生成逻辑，需在状态更新完成后再执行导航。

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