安装 创建 运行项目

安装工具 npm install -g yarn react-native-cli

创建项目 react-native init demo 运行项目 react-native run-ios

模拟器测试 记住要先升级本地环境，不然会出现各种各样后续版本问题

http://localhost:8081/debugger-ui/ 调试地址

// ios 正常情况就可以跑起来 
// 安卓的时候 估计可能会报错
The specified Android SDK Build Tools version (28.0.2) is ignored, as it is below the minimum supported version (28.0.3) for Android Gradle Plugin 3.2.1.
Android SDK Build Tools 28.0.3 will be used.
To suppress this warning, remove "buildToolsVersion '28.0.2'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.
// --- > 点击升级即可 

引入 react-native-vector-icons 图标库，减少图片输出 图标参考地址

如果出现错误，请参照 手动引入

// 安装图标库
npm install react-native-vector-icons --save
// 引入图标库 正常的话就可以了
react-native link react-native-vector-icons --save

import FontAwesome from 'react-native-vector-icons/FontAwesome5'
<FontAwesome name={'user'} size={26} style={{ color: 'red' }} />

引入react-navigation 3.3 引入报错

这个是没执行 参考 官网 和解决问题地址

yarn add react-native-gesture-handler
react-native link

需要注意的

const AppNavigator = createStackNavigator({
    TabNav: { // 在路由里面定义tab页
        screen: AppTabNavigator,
        navigationOptions: {
            header: null // 如果需要顶部隐藏
        }
    },
    Details: {
        screen: ViewInfo
    }
})
// 3.x 需要createAppContainer 包着路由集合
export default createAppContainer(AppNavigator)
// 路由跳转带参数
      <Button
          title="跳转" onPress={() => this.props.navigation.navigate('Details' , {itemId: '86', otherParam: 'anything you want here' } ) }
        />
// 第二页面 接受参数
// console.log(this.props.navigation.getParam('itemId'))
// --- 页面title 根据上一个界面自定义
//在class 函数里面 直接 使用static方法
static navigationOptions = ({ navigation }) => {
    console.log(navigation.getParam('itemId'))
    return {
      title: navigation.getParam('itemId')
    }
  }

React-Navigation设置不同页面跳转时候的转场动画

import StackViewStyleInterpolator from "react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator";
// console.log(StackViewStyleInterpolator)
const TransitionConfiguration = () => ({
    screenInterpolator: (sceneProps) => {
        const { scene } = sceneProps;
        const { route } = scene;
        const params = route.params || {};
        const transition = params.transition || 'forHorizontal';
        return StackViewStyleInterpolator[transition](sceneProps);
    },
})

react-native-swiper

轮播图下面的原点不跟着动，只需要key=图片的length即可

<Swiper key={this.state.top_storiesData.length} style={styles.wrapper}>

react native 使用react-native-swiper，swiper设置了高度，总是会占满全屏，通过各种尝试，找到解决办法：
在Swiper外添加View标签并且设置高度，终于正常显示

react-native-image-picker实现照片上传并显示到前端 插件用法

如果 react-native link react-native-image-picker 之后还在闪退啥的就证明ios或者安卓没添加相应的info.plistios权限 安卓权限
iOS拍照为英文，如果需要设置成中文简体，请看这篇：《iOS设置拍照retake和use按钮为中文简体》

通讯录 react-native-contacts npm地址

yarn add react-native-contacts
react-native link react-native-contacts

中文解析 还是注意权限和其他问题

清除缓存 react-native-clear-cache

yarn add react-native-clear-cache
react-native link react-native-clear-cache
// 在安卓里面权限设置为true 
android:allowBackup="true"

react-native-splash-screen 解决rn白屏github官网

ios具体操作

容易出错和版本不一样的地方

1.给作者github上面的android/app/src/main/res 全部下载下来拷贝到本地文件
2.更新你的 MainActivity.java 文件
这里的版本变化了但是，主程序执行的顺序还是这样的

和官方需要修改和注意的地方
3.特别注意有时候是缓存，不行的时候就卸载应用，咨询读github文档
4.解决问题的文档

未完待续...