集成react-navigator和react-redux

• 集成react-navigator(安卓)
  使用expo直接yarn add react-navigator就可以用了，但是在expo中不便于引用特定平台的sdk，所以直接用react-native-cli生成的初始项目集成react-navigator更便于自己操作
  新版的react-navigator 4.x中，react-navigator包含了三个依赖
  ，分别是react-native-gesture-handler，react-native-reanimated和react-native-screens，分别安装三个插件：
  yarn add react-native-gesture-handler,react-native-reanimated,react-native-screens
  之后配置安卓中新加的依赖包
  android/app/build.gradle:

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

在dependencies中添加上述代码，并在Android Studio中sync一下，导入以上两个包
在MainActivity.java中添加以下带+号的代码

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

再在项目入口文件（app.js或index.js）中添加引入react-native-gesture-handler的代码：

import 'react-native-gesture-handler'

之后就可以运行了，如果此时RN运行报错，可以点击rebuild Project重新构建，再运行RN程序

image.png

安卓0.8版本sdk安装时会有重复导入的问题，可以在安装时弹出第二次选择地址安装之前，删除sdk路径下jre文件夹里的所有内容，再进行安装，这样就不会出现包的问题

• react-redux
  app.js

import React from 'react';
import {
  StyleSheet,
  StatusBar,
  Button
} from 'react-native';
import { NativeModules } from 'react-native';
import {createStore, applyMiddleware} from 'redux'
import {Provider} from 'react-redux'
import todoApp from './src/store/reducer'
var store = createStore(todoApp)
import Counter from './src/route/count/connect'
import {createAppContainer} from "react-navigation";
import {createStackNavigator} from 'react-navigation-stack'
import HomeScreen from './src/route/home/connect'
const AppNavigator = createStackNavigator({
    Home: {
        screen: HomeScreen
    },
    Counter: {
        screen: Counter
    }
});
let Navigation = createAppContainer(AppNavigator)
class App extends React.Component{
    onPressLearnMore = () => {
        NativeModules.ToastTest.show('awesom546415645e', NativeModules.ToastTest.LONG)
    }
    render() {
        return (
            <Provider store={store}>
                <Navigation />
            </Provider>
        );
    }
};
export default App;

基本思路：将react-navigator封装的路由组件挂载在app组件中，再将app组件暴露出去
home.js

import React from 'react'
import {View, Button, Text} from 'react-native'
import {decrement, increment} from "../../store/action";

class HomeScreen extends React.Component {
    constructor(props) {
        super(props)
    }
    increment = () => {
        this.props.dispatch(increment(1))
    }
    decrement = () => {
        this.props.dispatch(decrement(1))
    }
    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>Home Screen</Text>
                <Text>{this.props.count}</Text>
                <Button title="increment" onPress={this.increment.bind(this)}/>
                <Button title="decrement" onPress={this.decrement.bind(this)}/>
                <Button title="跳转" onPress={() => {
                    this.props.navigation.navigate('Counter', {count: this.props.count})
                }}/>
            </View>
        )
    }
}
export default HomeScreen

homeConnect

import {connect} from 'react-redux'
import Home from './home'

function mapStateToProps(state) {
    return {
        count: state.todos.count
    }
}
export default connect(mapStateToProps, null)(Home)

counter.js:

import React from 'react'
import {
    View, Text,
    StatusBar,
    Button
} from 'react-native';
import {decrement, increment} from "../../store/action";
class Counter extends React.Component {
    constructor(props) {
        super(props)
    }
    increment = () => {
        this.props.dispatch(increment(1))
    }
    decrement = () => {
        this.props.dispatch(decrement(1))
    }
    render() {
        return (
            <View>
                <Button title='-' onPress={this.decrement.bind(this)} />
                <Text>{this.props.count}</Text>
                <Button title='+' onPress={this.increment.bind(this)} />
                <Text>{'asd:'+this.props.navigation.getParam('count')}</Text>
            </View>
        )
    }
}
export default Counter

todos:

const initialState = {
    count: 0
}
function todos(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return {
                count: state.count + 1
            }
        case 'DECREMENT':
            return {
                count: state.count -1
            }
        default:
            return state
    }
}

export default todos

reducer.js

import {combineReducers} from "redux";
import todos from './reducer/todos'
export default combineReducers({
    todos
})

actions:

export const increment = number => {
    return {
        type: 'INCREMENT', number
    }
}
export const decrement = number => {
    return {type: 'DECREMENT', number}
}