基于react-natigation的 App 导航框架搭建

npm install -g expo-cli
expo init AwesomeProject
cd AwesomeProject
npm start # expo start
npm run android
npm run ios

ReactNative 提供了哪些能力

• 基于原生 UI 组件（不用 html 标签，自有一套原生组件）
• 手势识别（调用系统提供的一些功能-网页没有这个能力）
• 基于 FlexBox 的 css 布局模式（只认识 FlexBox 布局）
• 跨平台开发 多平台 - uni-app(基于 vue)
• 基于 React，jsx 的组件开发模式
• 可使用 npm 中的模块
• Chrome Dev Tool

var Hello = React.createClass({
    render: function(){
        return <Text>Hello React Native</Text>
    }
})

环境安装总结

• 安装 Homebrew // 包管理器
• brew install node
• brew install watchman // 监视文件变化
• brew install flow // 检测 jsx 语法
• npm install -g react-native-cli // reactNative 的客户端形式
• react-native init appname // 初始化项目
• react-native run-ios/ open ***.xcodeproj 启用 ios 模拟器

启动运行

Run instructions for ios:
    cd "*/myappv1" && npx react-native run-ios
    or
    • Open myappv1/ios/myappv1.xcworkspace in Xcode or run "xed -b ios"
    • Hit the Run button

Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "*/myappv1" && npx react-native run-android

Image 组件

import { Image } from 'react-native';
<Images syle={{
    height: 100,
    width: 500,
    resizeMode: 'stretch',
    justifyContent: 'center',
    alignItems: 'center'
}}>

tips: filename/filename.xib 启动页设置 filename/Images.xcassets 图标设置

Text 组件

Text可以套Text 使用numberOfLines属性设置文本长度限制

<Text numberOfLines={5}>
 ....
</Text>

Cordova

介绍

• 一个移动开发框架
• 将 HTML, CSS, JS 封装为原生 APP(Hybrid)