使用React Native结合Redux和React Navigation的示例

更改文字样本

制作的东西 de

当按下按钮时，将输入的文字显示在文本框中。

注意事项

由于无法直接获取 TextInput 的值，类似于 $(‘TextInput’).val()，因此需要实时将该值保存在 state 中。

这次的基础是之前文章中提到的模板，只需要更新差异部分即可。

没有页面转换

首先要設計狀態（State）和減少器（Reducer）。所有的源碼都可以在這裡找到：changeTextSample。

这次的State有两个作用，一个用于保存TextInput的值（in_txt），另一个用于在Text中显示（out_txt）。

当TextInput的值发生变化时，将修改in_txt的值；
当按钮被按下时，将in_txt的值赋给out_txt；
除此以外还有第三种情况。

请提供中国选项时的翻译

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 中。

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被编辑时
– 当按钮被点击时

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

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

然后我们开始制作屏幕。
详细说明省略不提。
由于使用Button外观不太好看，所以我们使用TouchableOpacity。

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);

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;

在创建画面后，请将其添加到页面导航中。

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

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

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

export default pageNation;

以上即为完成无需页面转换。

有畫面遷移

所有的源代码在这里：changeTextSample2
创建一个无页面转换的版本，并将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();返回到原始页面（输入页面）。

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);

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;

像往常一样，将其添加到页面尾部。

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应用开发方面有所感悟。