react-native 如何在不同屏幕中使用相同的數組？

Question

我有一個數組，我想在不同的屏幕中使用它。 我試圖將它作為導航參數傳遞，但我的數組中只有一個參數被傳遞到下一個屏幕。 我已經讀過，我可以在全局范圍內定義數組或使用 Redux，但我認為，在我的具體情況下，這將是矯枉過正。 另外我讀過一些叫做通量的東西，但我還沒有找到適合我的情況的解決方案。 難道沒有更簡單的方法可以將我的完整數組傳遞給 Next 屏幕，以便我可以在 Next Screen.js 文件中使用該數組嗎？ 我會非常感謝一些幫助。 這是我的代碼：

應用程序.js

export default function App() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Menu" component={Menu} />
    <Stack.Screen name="NextScreen" component={NextScreen} />
  </Stack.Navigator>
</NavigationContainer>
);
}

菜單.js

 export default function Menu({ navigation }) {
const [array, setArray] = useState(
 {text: '1', gender: 'm', key:'1'},
 {text: '2', gender: 'm', key:'2'},
 {text: '3', gender: 'm', key:'3'}
)
const navigate = () => {
navigation.navigate('NextScreen')
}
return(
<View>
  <Button title='NextScreen' onPress={navigate}></Button>
</View>   
)
}

NextScreen.js

export default function NextScreen({ navigation }) {

return(
    <View>

    </View>
)
}

Answer 1

您可以在文件中聲明數組並從不同的屏幕導入它。

數據.js

const Users = [
  { text: '1', gender: 'm', key: '1' },
  { text: '2', gender: 'm', key: '2' },
  { text: '3', gender: 'm', key: '3' },
];

export { Users };

菜單.js

import { Users } from './data';
...
...

NextScreen.js

import { Users } from './data';
...
...

Answer 2

不太清楚為什么當您將它作為params傳遞給NextScreen時它不起作用。 嘗試以下我的實現：

StackNavigator

 export interface Human { text: string; gender: string; key: number; } export type RootTabParamList = { Menu: undefined; NextScreen: { humans: Human[] | undefined; }; }; const StackExample = createNativeStackNavigator<RootTabParamList>(); function StackNavigator() { return ( <StackExample.Navigator initialRouteName="Menu"> <StackExample.Screen name="Menu" component={Menu} /> <StackExample.Screen name="NextScreen" component={NextScreen} initialParams={{ humans: undefined }} /> </StackExample.Navigator> ); }

Menu

 export default function Menu({ navigation, }: NativeStackScreenProps<RootTabParamList, "Menu">) { const [humans, setHumans] = useState<Human[]>([ { text: "Homer Simpson", gender: "male", key: 0, }, { text: "Marge Simpson", gender: "female", key: 1, }, ]); return ( <View style={styles.container}> <Button title="Go to NextScreen" onPress={() => { navigation.navigate("NextScreen", { humans: humans }); }} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center", }, });

NextScreen

 export default function NextScreen({ route: { params }, }: NativeStackScreenProps<RootTabParamList, "NextScreen">) { console.log("params.humans", params.humans); return ( <View style={styles.container}> <></> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center", }, });