ReactNative

官方网站中文网站

什么是App什么是Web?

app是应用程序
webapp有web版本的应用程序
移动web,和移动app
手机-刚开始与座机的区别就是方便一点，小一点!
- 手机: 玩个蛇，块
- saiban: 半智能操作系统! (nokia 5230)
- 11年或者10年, nokia用户越来越少了, android多了
- ios,android （手机端的智能操作系统）
ios,android
ios OC 语言
android java 语言

10k, 10k, (10 + 10) 3 = 60k Hybrid: 1一个人可以做android和ios的,10k, 103 = 30k

// 雷峰和雷峰塔!

什么是Hybrid App?

原生的技术和非原生的技术(oc或者java 与 web一同开发的app) 有些Hybrid App是侧重于oc或者java 和 web为辅助以web为主，oc或者java为辅助

web和原生App语言优势:

能够将写在HTML,JavaScript,CSS 文件打包成App的工具

cordova,ionic, Hbuild,appcan .... 用这种工具打包时，通常会做成单页应用(也不一定)

Hbuild

本身是个编辑器,它允许我们上传代码到它们的服务器，帮我们打包,然后把打包后的文件发给我们,这个打包是在线打包!

ReacNative

浏览器中网页的运行性能是不及原生的性能的! jsx语法来开发App 写的是jsx代码,ReactNative打包时会将代码转换为原生的代码,交给原生的系统去执行!

环境的安装?

Android开发环境jdk和sdk

jdk (版本不能低于1.8.0) java语言运行所需要的的环境工具默认安装! 默认的安装路径: C:\Program Files\Java

sdk 是android所需要的工具解压我发的sdk.rar,我解压到了C:\iscDev\sdk

不要将这些软件安装或者解压到中文路径下! sdk,它的解压路径中不能有空格!

为jdk和sdk配置环境变量!

jdk: C:\Program Files\Java\jdk1.8.0_144\bin添加到PATH变量中!
sdk: 新建一个变量
ANDROID_HOME 值就是sdk的解压路径： C:\iscDev\sdk 把sdk中这个platform-tools文件夹路径添加PATH变量中！
platform-tools

验证自己有没有配置成功!

在命令行输入javac 和 adb

ReactNative环境

安装命令行工具

npm install -g yarn react-native-cli

开始一个ReactNative项目

初始化项目结构 react-native init myProject 命令将生成一个名为myProject的文件夹！ react-native命令是安装了cli工具之后就有了

react-native init myProject

修改一些问题(重新安装babel-preset-react-native)

因为这个包最后更新了一下，ReactNative默认会下载3.0的版本，会报错所以要下载2.1.0的版本覆盖原来的版本安装2.1.0版本的babel-preset-react-native,默认安装的版本太高！

 yarn add babel-preset-react-native@2.1.0
 相当 npm install babel-preset-react-native@2.1.0

运行初始化好的项目之前

电脑中需要安装并启动一个【Android模拟器】(就是一个虚拟机)

或者有一个【真机】通过usb连接到电脑中(手机的话需要启用开发者选项!) 启用开发者选项

运行初始化好的项目

react-native run-android初次运行时会下载其他所需要的文件, 下载好之后会对项目进行打包生成apk并自动安装到手机或者手机模拟器中! 注意事项，第一次执行这个 react-native run-android, 会自动下载好多好多东西! 会下载到：C:\Users\huoqishi\.gradle, 其中有一个压缩打死也有99%的概率下载不下来, 所以就复制已经下载好的：复制到: C:\Users\huoqishi\.gradle\wrapper\dists\gradle-2.14.1-all\8bnwg5hd3w55iofp58khbp6yv 这个文件夹下。gradle-2.14.1-all 可以到: http://services.gradle.org/distributions/这个地址去下载相应的gradle

复制到C:\Users\huoqishi\.gradle, 之后，再重新执行 react-native run-android 会继续下载其他的文件(其他文件比较好下载!)

cd myProject
react-native run-android

开始学习ReactNative

View与Text组件

样式的处理

用户输入

TextInput

onChangeText

onSubmitEditing

FlexBox布局

滚动视图

ScrollView

长列表视图

FlatList

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

图片

Image

<Image source={require('./my-icon.png')} />
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

背景图(ImageBackground)

  <ImageBackground source={...}>
    <Text>Inside</Text>
  </ImageBackground>

触摸事件

如果要给一个View或者Text等设置点击事件，需要使用 Touchable开头的组件包裹才行

TouchableHighlight
TouchableNativeFeedback
TouchableOpacity

事件

ReactNative 初体验