React Native项目实践

[cuiyanhui]

1.搭建开发环境

https://reactnative.cn/docs/0.51/getting-started.html

2.创建项目《React Native高效开发》之 create-react-native-app

https://www.jianshu.com/p/abfb55c60684

3.安装xcode 本地调试使用

4.React-Native学习指南

https://github.com/reactnativecn/react-native-guide

5.项目创建后需要增加

6.启动项目

1.进入项目文件 >
2.运行  npm start  启动项目  
            npm run ios  启动iOS版    
            npm run android   启动android版

7.手机上调试需要安装expo （expo 软件第一次打开很慢）

使用照相功能扫一扫 扫描 就可以在手机上查看效果了

8.结构架构

9.参考资料

https://www.jianshu.com/p/a7416ec82f6d  webview 详解
https://www.jianshu.com/p/abfb55c60684  《React Native高效开发》之 create-react-native-app
https://reactnative.cn/docs/0.51/getting-started.html  搭建开发环境
https://www.jianshu.com/p/91fa0f34895e ReactNative的Navigator组件使用方式
https://www.jianshu.com/p/a69829206ac5  Ionicons官网图标
https://www.jianshu.com/p/96d5c66791c3  React-Native使用自定义字体文件iconfont
https://blog.csdn.net/Marno__/article/details/71809757?locationNum=7&fps=1 50个react native项目
https://blog.csdn.net/chichengjunma/article/details/52920137 react native 第三方组件汇总
https://blog.csdn.net/vv_bug/article/details/6119556React Native 自定义ProgressBar(双平台)
https://www.jianshu.com/p/b7788c3d106e  [React Native]react-native-scrollable-tab-view(入门篇)

10.react native 错误类型 及解决方法

1.问题：React Native Undefined is not an object(evaluating ‘_react2.PropTypes.func’)

  解决方法 import {PropTypes} from 'prop-types';

2.引用数据文件 名称需要加大括号

   例：import { channelData } from '../dataChannel’

3. null is not an object (evaluating '_this3._pressRow') 未bind(this)

    this._pressRow（错误）
    this._pressRow.bind(this)（正确）

4.版本重置：

    $yarn remove babel-preset-react-native   卸载模块
    $yarn add babel-preset-react-native@2.1.0   安装组件指定版本

5.Module react-navigation does not exist in the Haste module map or in these directories

（导航控制器已经添加过了，但是还报这个错）
    解决办法： 
     先卸载这个模块： npm uninstall react-navigation
     然后重新安装： yarn add react-navigation

6.（添加自定义字体）Getting Started with NativeBase

      https://www.jianshu.com/p/96d5c66791c3
   a.浏览到node_modules/react-native-vector-icons目录，然后选中 Fonts 目录，将Fonts目录中的所有文件
      拷贝到工程文件目录下，然后将Fonts目录拖到工程文件中，记得勾选Create Groups复选框。
   b.编辑Info.plist文件，添加自定义字体的名称。

7.fetch 请求接口模板

fetch('http://ip.taobao.com/service/getIpInfo.php?ip=59.108.51.32’,{
method: 'GET’,
}).then((response) => {
console.log(response);//1
}).catch((err) => {//2
console.error(err);
});

8.第三方组件需要先 安装 才可以使用

安装命令 yarn add react-native-vector-icons
在页面里面引用 import Icon from 'react-native-vector-icons/Ionicons’

9.使用react native 自带组件需要在页面开始进行引用 例如 TouchableWithoutFeedback

import {
StyleSheet,
Text,
Image,
View,
TouchableWithoutFeedback
} from 'react-native';

10.定义样式的方式

const styles= StyleSheet.create({
keywords: {
flexDirection: "row",
},
});
使用方法
style={styles.keywords}

11.分享功能的实现（微信）

https://blog.csdn.net/liu__520/article/details/52809815``