React Native 初体验

React Native Tutorial

Posted by yellowDog on 2019-01-30

前话

临近新年,祝新年快落!

今年你集齐了福吗?


那么正文开始咯。

安装依赖

1
2
3
brew install node
brew install watchman
npm install -g react-native-cli

官网地址

(推荐还是使用完整原生环境,不是沙盒环境)


启动项目

1
react-native run-ios

引入第三方组件

如果第三方组件中含有 native 代码,一定要 link 再启动项目

1
react-native link

如果第三方库还是 JavaScript 写的,那不就用啦。

react-native link 做了啥

比如我引入了 react-native-cookie 这个第三方库

Android

Gradle 是一个 Java 系语言的自动化构建工具,使用 groovy 特定语言声明项目的配置

文件变动

/android/app/build.gradle

1
2
3
dependencies {
compile project(':react-native-cookies')
}

/android/settings.gradle

1
2
include ':react-native-cookies'
project(':react-native-cookies').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-cookies/android')

IOS

使用 CocoaPods 这个依赖管理器

官方指南

说到这里 react-native link 其实就是起同时改动 iosandroid 的依赖配置作用


React 方面

StyleSheet

rn 包里就带有 StyleSheet

css in js 的体验还是不错的

1
2
3
4
5
6
7
8
9
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
label: {
color: '#5fbdaa',
fontSize: 14,
marginBottom: 4,
fontWeight: 'bold'
}
})

存储能力(AsyncStorage)

和 Web 的 localStorage 不太一样的地方是 AsyncStorage 还有一个 callback

1
2
3
4
5
AsyncStorage.getItem('token', (err, token) => {
if (!token) {
navigation.navigate('Authentication');
}
});

Cookie

本来是想用 Cookie 判断登录状态,奈何在 headers 里取不到 Set-Cookie,然后翻了翻 react-native-cookie这个库,有个 issue 作者还没处理,最后使用 token 的形式了233…


用 Context API 实现 i18n


React-Native-Debugger

React-Native-Debugger

可以看到 Request 的信息,比原生的远程调试要方便一点