React Native 0.61 使用的变化

“react-native”: “0.61.5” 版本

创建新项目

0.60 及以上版本依赖CocoaPods安装。

新版的 CocoaPods 不允许用pod repo add直接添加master库了，但是依然可以：

$ cd ~/.cocoapods/repos 
$ pod repo remove master
$ git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master

最后进入自己的工程，在自己工程的podFile第一行加上：

source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

参考：https://mirror.tuna.tsinghua.edu.cn/help/CocoaPods/

ios 运行

React Native 目前需要Xcode 10 或更高版本。

注意0.60版本之后的主项目文件是.xcworkspace，不是.xcodeproj！

android 运行

React Native 需要 Java Development Kit [JDK] 1.8（暂不支持 1.9 及更高版本）

~/.bash_profile 中配置变量环境

安装插件后的关联方式

变化为：使用pod，不是之前的 react-native link

For iOS using cocoapods, run:

$ cd ios
$ pod install

AsyncStorage

对于 App 来说是全局性的。可用来代替 LocalStorage。

Deprecated. Use react-native-community/react-native-async-storage instead.

import

import AsyncStorage from '@react-native-community/async-storage';

存储 data

storeData = async () => {
  try {
    await AsyncStorage.setItem('@storage_Key', 'stored value')
  } catch (e) {
    // saving error
  }
}

读取 data

getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

react-navigation

除了安装 react-navigation，还需要安装其余的依赖

react-native-gesture-handler, react-native-reanimated, and react-native-screens.

参考： https://reactnavigation.org/docs/en/getting-started.html

页面开发中，需要安装 react-navigation-stack

import { createAppContainer } from 'react-navigation'; 
import { createStackNavigator } from 'react-navigation-stack';
const AppNavigator = createStackNavigator({
   Home: {
     screen: HomeScreen,
   },
 }); 
export default createAppContainer(AppNavigator);

参考： https://reactnavigation.org/docs/en/hello-react-navigation.html

Tab 切换需要安装 react-navigation-tabs

import { createBottomTabNavigator } from 'react-navigation-tabs';
const TabNavigator = createBottomTabNavigator({
   Home: HomeScreen,
   Settings: SettingsScreen,
 }); 
export default createAppContainer(TabNavigator);

参考： https://reactnavigation.org/docs/en/tab-based-navigation.html

更新中… …