- 集成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程序
安卓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 (
);
}
};
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 (
Home Screen
{this.props.count}
)
}
}
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 (
{this.props.count}
{'asd:'+this.props.navigation.getParam('count')}
)
}
}
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}
}