React Native项目实践 #1
Description
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}