React-nativeとReactnavigationとredux

React-NativeとReactNavigationとReduxを使った簡単な例

まず最初にreactnavigationの公式サイトの例を見てみましょう。
(https://reactnavigation.org/docs/redux-integration/)

この例を分解してみます。

ここは分けずシンプルに一枚にまとめました。
まだ、学習中なのでおいおい考えていきます。

redux.js

import * as React from 'react';
import { createStore, combineReducers } from 'redux';

// A very simple reducer
 function counter(state, action) {
    if (typeof state === 'undefined') {
      return 0;
    }
  
    switch (action.type) {
      case 'INCREMENT':
        return state + 1;
      case 'DECREMENT':
        return state - 1;
      default:
        return state;
    }
  }
  
  // A very simple store
  export let store = createStore(combineReducers({ count: counter }));

いつものApp.js

App.js

import * as React from 'react';
import { Provider, connect } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

//redux.jsからstoreをインポート
import { store } from './redux'

//画面をインポートします。パスは自分のファイル配置で変えてください
import { StaticCounter } from './StaticCounter'
import { Counter } from './Counter'


// Connect the screens to Redux
let CounterContainer = connect(state => ({ count: state.count }))(Counter);

// Create our stack navigator
let RootStack = createStackNavigator();

// Render the app container component with the provider around it
export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <RootStack.Navigator>
          <RootStack.Screen name="Counter" component={CounterContainer} />
          <RootStack.Screen
            name="StaticCounter"
            component={StaticCounter}
            options={({ route }) => ({ title: route.params.count })}
          />
        </RootStack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

第一画面を作成します。

Counter.js

import * as React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';


export function Counter({ count, dispatch, navigation }) {

    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{count}</Text>
        <Button
          title="Increment"
          onPress={() => dispatch({ type: 'INCREMENT' })}
        />
        <Button
          title="Decrement"
          onPress={() => dispatch({ type: 'DECREMENT' })}
        />
  
        <Button
          title="Go to static count screen"
          onPress={() =>
            navigation.navigate('StaticCounter', {
              count,
            })
          }
        />
      </View>
    );
  }


  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#ecf0f1',
      padding: 8,
    },
    paragraph: {
      margin: 24,
      fontSize: 18,
      fontWeight: 'bold',
      textAlign: 'center',
    },
  });

第二画面

StaticCounter

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


// Another screen!
export function StaticCounter({ route }) {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{route.params.count}</Text>
      </View>
    );
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#ecf0f1',
      padding: 8,
    },
    paragraph: {
      margin: 24,
      fontSize: 18,
      fontWeight: 'bold',
      textAlign: 'center',
    },
  });

以上簡単に書いてみましたがまだ細かい部分について学習が足りないので引き続き勉強していきます。