#react-native+redux+react-navigationサンプル

##changeTextサンプル
###作るもの
　・TextInputに入力された文字をボタンを押したらTextに表示

###注意点
　・TextInputの値を直接　$('TextInput').val()　みたいに取得できないので、リアルタイムでその値をstateに保存する必要がある。

　今回は前回記事で書いたテンプレートをベースに差分だけUPしていきますね。
##ページ遷移なし
全部のソースはここ：changeTextSample

まずはStateとReducerの設計。

今回Stateは、
　・TextInputの値保存用(in_txt)
　・Textに表示する用(out_txt)
の2つ。

Reducerの値変更パターンは、
　・TextInputの値が変わったらin_txtを変更
　・ボタンが押されたらout_txtにin_txtを代入
　・それ以外
の3つ。

それではソース

changeTextReducer.js


const state = {
	out_text:'',
	in_text:'',
}

const changeTextReducer = (state=state, action) => {
	switch(action.type){
		
		case 'EDIT':
			return{
				...state,
				in_text: action.in_text,
			};

		case 'PRESS_BTN':
			return{
				...state,
				out_text: state.in_text,
			};

		default:
			return { ...state };
	}
}

export default changeTextReducer

Reducerを作ったらallReducer.jsに追加してください。

allReducer.js

import { combineReducers } from 'redux';
import navReducer from './navReducer';
import changeTextReducer from './changeTextReducer';//ここ

const allReducers = combineReducers({
	nav:navReducer,
	ct:changeTextReducer, //ここ
});

export default allReducers;

次にActionファイルの作成。今回使うActionは　・TextInputが編集された時　・ボタンが押された時の２個

changeTextActions.js


export const editText = text => {
	return {
		type: 'EDIT',
		in_text: text,
	}
}

export const pressBtn = () => {
	return {
		type: 'PRESS_BTN',
	}
}

そしたら画面を作っていきます。詳しい説明は割愛。 Button使うと見た目があれなのでTouchableOpacity使ってます。

Input.js

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Text, View, TextInput, TouchableOpacity } from 'react-native';
import styles from './Input_style';
import * as actions from './changeTextActions';

class Input extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.txt}>『 {this.props.out_text} 』</Text>
        <TextInput style={ styles.txtIn } onChangeText={ (text) => { this.props.editText(text) } } />
        <TouchableOpacity style={styles.tOpa} onPress={ () => { this.props.pressBtn(); } }>
          <Text style={styles.btnTxt}>変更</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const mapStateToProps = state => state.ct;
const mapDispatchToProps = dispatch => ({
  ...bindActionCreators(actions, dispatch)
});

export default connect(mapStateToProps,mapDispatchToProps)(Input);

Input_style.js

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  txt: {
    fontSize: 25,
  },
  txtIn: {
    height: 40,
    width: 300,
    marginTop: 20,
    fontSize: 25,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 5,
    textAlign: 'center',
  },
  tOpa: {
    width: 100,
    height: 50,
    padding: 10,
    borderRadius: 10,
    backgroundColor: 'lightgray',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 20,
  },
  btnTxt: {
    fontSize: 18,
  },
});

export default styles;

画面を作成したらpageNationに追加してください。

pageNation.js

import { StackNavigator } from 'react-navigation';
import Input from './Input';//ここ

export const rootCom = 'Input';//1ページだけなのでルート要素としてここにも書く

const pageNation = StackNavigator({
  Input: {              //ここから
    screen:Input, 
  },                    //ここまで
});

export default pageNation;

以上で画面遷移なしは完成。

##画面遷移あり
全部のソースはここ：changeTextSample2
画面遷移なしverをつくって、そこのInput.jsを下記のように修正

Input.js

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Text, View, TextInput, TouchableOpacity } from 'react-native';
import styles from './Input_styles';
import * as actions from './changeTextActions';

class Input extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput style={ styles.txtIn } onChangeText={ (text) => { this.props.editText(text); } } />
        <TouchableOpacity style={styles.tOpa} onPress={ () => { this.props.pressBtn(); this.props.navigation.navigate('Result'); } }>
          <Text style={styles.btnTxt}>変更</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const mapStateToProps = state => state.ct;
const mapDispatchToProps = dispatch => ({
  ...bindActionCreators(actions, dispatch)
});

export default connect(mapStateToProps,mapDispatchToProps)(Input);

表示用のTextがなくなっただけです。
onPressのところの　this.props.navigation.navigate('Result');　で画面遷移してます。

次に、遷移後の画面を作成
onPressのところのgoBack();で元の画面(入力画面)に戻ります。

Result.js

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Text, View, TextInput, TouchableOpacity } from 'react-native';
import styles from './Result_styles';

class Result extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.txt}>『 {this.props.out_text} 』</Text>
        <TouchableOpacity style={styles.tOpa} onPress={ () => { this.props.navigation.goBack(); } }>
          <Text style={styles.btnTxt}>戻る</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const mapStateToProps = state => state.ct;


export default connect(mapStateToProps)(Result);

Result_style.js

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  txt: {
    fontSize: 25,
  },
  tOpa: {
    width: 100,
    height: 50,
    padding: 10,
    borderRadius: 10,
    backgroundColor: 'lightgray',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 20,
  },
  btnTxt: {
    fontSize: 18,
  },
});

export default styles;

例のごとくpageNationに追加

pageNation.js

import { StackNavigator } from 'react-navigation';
import Input from './Input';
import Result from './Result';  //ここ

export const rootCom = 'Input';

const pageNation = StackNavigator({
  Input: {
    screen:Input,
  },
  Result: {             //ここ
    screen:Result,
  },
});

export default pageNation;

以上で終わりです。

なんとなくでもreact-nativeでのアプリケーション開発の感覚がつかめてれば幸いです。