React Native基礎⑦～zustandを使う

遷移する画面にパラメータを渡すのではなく、reduxのようにしたい場合があると思います。ここではreduxではなくzustandを導入します。

（プロジェクト）/App.js

import { StatusBar } from 'expo-status-bar';

import { Button } from 'react-native';

import { StyleSheet, Text, View } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

import useStore from './store';

function HomeScreen({navigation}) {

  const {id, setId} = useStore();

  return(

    <View>

      <Text>Home1</Text>

      <Button

         title='Home1'

         onPress={() => {navigation.navigate('Detail');

                          setId(1);}} />

    </View>

  )

}

function DetailScreen({route}) {

  const {id, setId} = useStore();

  return(

    <View>

      <Text>Detail</Text>

      <Text>ID is {id}</Text>

    </View>

  )

}

export default function App() {

  const Stack = createStackNavigator();

  return (

    <NavigationContainer>

      <Stack.Navigator>

        <Stack.Screen name='Home' component={HomeScreen} />

        <Stack.Screen name='Detail' component={DetailScreen} />

      </Stack.Navigator>

    </NavigationContainer>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

（プロジェクト）/store.js

import {create} from 'zustand';

const useStore = create*1

}));

export default useStore;

*1:set) => ({

    id:0,

    setId:(value) => set((state) => ({ id:value }