React-Native 搭建开发环境

# 安装 RN 脚手架和 yarn:npm i react-native-cli yarn -g

# 创建项目:react-native init demo

如果 init 太慢,可以使用淘宝的镜像

// 查看下载源
yarn config get registry
// 更换为淘宝源
yarn config set registry https://registry.npm.taobao.org
1
2
3
4

# 启动服务器:react-native start

等一段时间,用浏览器访问http://localhost:8081/index.android.bundle?platform=android可以访问,即启动完成,启动之后不能关闭;

# 安装 app:react-native run-android

在输入此命令前,要先打开模拟器,或连接真机,第一次启动非常慢,需要下载 gradle,也可以手动下载 gradle 安装。

# 加速 gradle

找到build.gradle修改成下面这样

buildscript {
    repositories {
        maven { url "http://maven.aliyun.com/nexus/content/groups/public/" }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.3'
    }
}
1
2
3
4
5
6
7
8

# 安卓必须 5.0 以上,支持adb reverse命令

# 配置 eslint

npm install eslint babel-eslint eslint-plugin-react --save-dev
1

这里根据自己喜欢的规则来配置

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "parser": "babel-eslint",
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "rules": {
    "react/prop-types": "off"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# React-Navigation 与 redux 的整合

https://reactnavigation.org/docs/guides/redux

首先安装npm i react-navigation

# 配置路由信息

import { StackNavigator, addNavigationHelpers, NavigationActions } from "react-navigation";

const AppRouteConfigs = {
  Main: { screen: MainView },
  Profile: { screen: ProfileView },
};
const AppNavigator = StackNavigator(AppRouteConfigs, {
  initialRouteName: "Main",
  headerMode: "none",
});
1
2
3
4
5
6
7
8
9
10

# 编写路由的 reducer

const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams("Main"));
const navReducer = (state = initialState, action) => {
  const nextState = AppNavigator.router.getStateForAction(action, state);
  return nextState || state;
};
const appReducer = combineReducers({
  nav: navReducer,
  app: reducer,
});
1
2
3
4
5
6
7
8
9

# 编写路由的根组件

class App extends Component {
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onBackPress = () => {
    const { dispatch, nav } = this.props;
    if (nav.index === 0) {
      return false;
    }
    dispatch(NavigationActions.back());
    return true;
  };
  render() {
    return (
      // 这里将两个工具属性注入到路由中
      <AppNavigator
        navigation={addNavigationHelpers({
          dispatch: this.props.dispatch,
          state: this.props.nav,
        })}
      />
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 生成带有 redux 状态的根组件

const mapStateToProps = state => ({
  nav: state.nav,
});
const AppWithNavigationState = connect(mapStateToProps)(App);
const store = createStore(appReducer);

class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppWithNavigationState />
      </Provider>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 用 adb 发送 menu 事件打开 dev 菜单

adb shell input keyevent 82
1