混合应用
Ionic
- Angular官网 https://angular.io/
- Ionic官网 http://ionicframework.com/
- Ionic中文网 http://www.ionic.wang/
- Cordova官网 https://cordova.apache.org/
- Cordova中文网 http://cordova.axuer.com/
Html5+
AppCan
微信公众号
原生App
ReactNative
- React官网 https://facebook.github.io/react/
- ReactNative官网 https://facebook.github.io/react-native/
- ReactNative中文网 https://reactnative.cn/
Weex
- Vue官网 https://cn.vuejs.org/
- Weex官网 http://weex.apache.org/cn/
- WeexGithub https://github.com/apache/incubator-weex
Flutter
- Rlutter官网 https://flutter.io/
- Rlutter中文网 https://flutterchina.club/
安装
npm install -g create-react-native-app 2.0.2
检测版本号
create-react-native-app --version
使用
- 创建项目
create-react-native-app projectName -
选择空白模板
2019-03-16_203734.png - 填写名称
- 等待完成后
- 启动项目
cd projectName
npm start
开发初体验
- 在项目根目录下有个
App.js, 是应用的根组件, 我们手机上看到的内容就是这个组件实现的 - 尝试修改
App.js中的文本内容, 然后手机摇一摇, 点击Reload选项即可更新修改内容 - 也可尝试给文本添加新的样式
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// 导出根组件, 组件的定于语法与之前学习的一样
export default class App extends React.Component {
render() {
return (
// 返回的视图需要使用View组件包裹, 作用相当于Div标签
<View style={styles.container}>
{/* 文本内容使用Text组件包裹, 作用相当于P标签 */}
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
// 定义样式, 这里的尺寸大小无需加单位, 元素可以通过数组引用多个样式, 后面的样式优先级比前面的高
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
错误提示 - 红屏和黄屏
RN代码运行时会把错误分为红屏和黄屏两种，红屏会以全屏红色显示在应用中，导致程序无法正常运行，红屏通常是编码错误导致的，必须修复。
黄屏代表警告，会显示在应用下方，不影响程序运行，不修复也可以，警告可以通过代码禁止。
红屏和黄屏只在debug版本中才会显示，在rellease版本中不会。一般情况下，通过RN红屏中的错误提示信息，就可以定位问题，如果是语法等常见运行错误，RN也会给出错误代码所在位置与行数，所以出现红屏一定要阅读描述信息。
// 频闭黄色警告，参数为一个数组：数组中的字符串就是要屏蔽的警告的开头的内容。
YellowBox.ignoreWarnings(['Warning: ']);
// 手动触发红屏和警告
console.error("严重错误");
console.warn("警告");
调试菜单
React-Native开发调试没有本地代码方便，但也是可以调的，在调试菜单中可以进行开发调试相关的配置。调试菜单只在debug版本中可以被调出，如果是模拟器环境，Windows平台按window+m可调出，也可能是F1或F2，Mac平台按commond+m可调出，或者发送adb shell input keyevent 82指令。如果是真机，摇一摇就可以调出调试菜单。
RN调试界面.jpg
调试菜单说明
- Reload: 重新加载整个页面
- Debug JS Remotely: 启动远程调试, 会自动打开chrome浏览器, 然后可在开发者工具中调试js
- Enable Live Reload: 开启自动加载, 代码变动会自动更新整个页面
- Enable Hot Reloading: 热更新, 代码变动自动的进行局部更新
- Dev Sttings: 开发调试配置
内置组件
- 在
React Native中你需要使用官方提供的组件进行应用构建 - 因为是开发
原生应用, 我们的代码最终会转为原生组件的方式渲染, 所以你不会看到任何以html标签命名的组件 - [官方文档] https://facebook.github.io/react-native/docs/getting-started
View
- 视图容器，作用相当于
html的div标签，它是创建UI所需的最基础组件，支持Flexbox布局、样式、触摸事件，它可以放到其它视图中，也可以包含任意多个任意子视图。 - https://reactnative.cn/docs/view/
import React, { Component } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
export default class ViewTest extends Component {
render() {
return (
{/* View标签相当于div，可以嵌套 */}
<View style={style.container}>
<View>
<Text>React Native</Text>
</View>
<View>
<Text>使用React编写</Text>
<Text>使用JSX编写</Text>
</View>
</View>
);
}
}
// 注意border、background等样式不能简写，必须一个一个的设置属性
let style = StyleSheet.create({
container: {
width: 300,
padding: 10,
borderStyle: "dashed",
borderWidth: 2,
borderColor: "red",
borderRadius: 2,
},
text: {
fontSize: 20,
color: "yellow",
}
});
