配置RN环境+antdm蚂蚁金服界面库

本机都是在macos下操作

安装包

1
2
3
4
5
6
brew install node
brew install watchman
brew install flow

npm install -g yarn
npm install -g react-native-cli

如果没有 Homebrew

/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

配置

1

yarn

1

npm

国内镜像

参考: https://npm.taobao.org/

• npm

1
npm --registry https://registry.npm.taobao.org info underscore

• yarn

1
yarn config set registry https://registry.npm.taobao.org

创建项目

1
react-native init myapp

过程漫长，请先

1

科学上网

运行

1
react-native run-ios

第一次运行，自动配置项目环境，进行编译，时间会有点长，正常将看到

1

ios模拟器

1

Cmd+D

1

调试面板

加入蚂蚁金服界面库

• 安装包

1
2
yarn add antd-mobile
yarn add babel-plugin-import -dev

• 修改

  1

  .babelrc

参考: https://github.com/ant-design/babel-plugin-import

1
2
3
4
{
  "presets": ["react-native"],
  "plugins": [["import", { "libraryName": "antd-mobile", "style": true }]]
}

• 修改

  1	index.ios.js

1
2
3
4
5
6
7
8
9
10
11
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Button } from 'antd-mobile';

class HelloWorldApp extends Component {
  render() {
    return <Button>Start</Button>;
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

在模拟器中

1

Cmd+R