文档章节

React03 移动端跨平台开发

o
 osc_4nmshwhm
发布于 2018/08/07 11:59
字数 1537
阅读 9
收藏 0

精选30+云产品,助力企业轻松上云!>>>

React-day03 RN移动端开发

[TOC]

了解React-Native

Facebook发起的开源的一套新的APP开发方案,Facebook在当初深入研究Hybrid开发后,觉得这种模式有先天的缺陷,所以果断放弃,转而自行研究,后来推出了自己的“React Native”方案,不同于H5,也不同于原生Native,更像是用JS写出原生应用

  • 优点
  1. 开发成本小于Native模式 Andriod-Java-Kotlin IOS-OC-Swift

  2. 性能体验高于Hybrid

  3. 一次学习,跨平台开发Android和iOS, 小程序

  4. 社区繁荣

  • 缺点
  1. 不同平台代码有所区别
  2. 开发人员学习有一定成本
  • 几种开发技术对比应用质量开发效率的平衡折衷的结果

了解React-Native工作流程

  1. 项目开发:使用Node初始化项目(需要安装Node),使用JavaScript/JSX语言开发
  2. 语言翻译:Python, C++将js翻译成java代码(需要安装Python2)
  3. 代码编译:Android-SDK将java编译成字节码(二进制),打包成可安装的apk(需要JDK8 & Android-SDK)
  4. 安装运行:通过Adb工具,把apk运行到Android模拟器

创建第一个React-Native项目 *

  • 安装脚手架react-native-cli 同时安装新的版包管理工具

    npm install -g yarn react-native-cli

  • 创建项目:doubanMovie(在不包含中文的目录执行)

    react-native init xxx --version react-native@0.55.4

  • 运行项目

    • 打开USB调试, 配置SDK

      • ANDROID_HOME=G:\Android-SDK
      • PATH=%PATH%;%ANDROID_HOME%\platform-tools
      • adb devices查看已连接设备
    • 连接模拟器: adb connect 127.0.0.1:62001

    • 更改gradle路径doubanMovie\android\gradle\wrapper\gradle-wrapper.properties

      • distributionUrl值修改为file\:///E:/Lesson/bc1/React/day03/Resource/gradle-2.14.1-all.zip 直接复制过来的路径要把反斜线\改成正斜线/
    • 在项目根目录执行react-native run-android

      运行期间会开启一个Node服务,不要关闭

    • 第一次运行报错,需要在设备上设置app的Node服务地址

      解决方式: 打开app > 菜单按钮 > Dev Settings -> Debug server host ...

      填写服务ip和端口号, 注意冒号用英文半角,重启服务,重启应用

了解React-Native项目及结构

  • 目录结构

    • index.js 项目入口文件
    • App.js 项目根组件,用户看到的首页组件
    • package.json 项目配置文件
    • app.json 配置项目名称
  • React-Native与React对比

    • 组件写法

      RN提供View,Text组件,没有html的dom元素

      View -> div 布局容器

      Text -> p 显示文字

    • 样式写法

      使用const styles = StyleSheet.create({...})

  • React-Native平台相关代码处理

    const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n Cmd+D or shake for dev menu',
      android: 'Double tap R on your keyboard to reload,\n',
    });
    

开发资料

项目开发

路由(react-native-router-flux)

  • react-native-router-flux

  • 源码地址:https://github.com/aksonov/react-native-router-flux

    应用场景:在RN项目中进行路由跳转时使用

    安装方式:yarn add react-native-router-flux

  • 使用:

    Router(路由): 一般写在项目的根组件

    Stack (栈):给Scene场景提供容器

    Scene(场景):设置路由跳转规则

    Actions (动作):触发路由跳转

    const App = () => (
      <Router>
        <Stack key="root">
          <Scene key="login" component={Login} title="Login"/>
          <Scene key="register" component={Register} title="Register"/>
          <Scene key="home" component={Home}/>
        </Stack>
      </Router>
    );
    

    注意事项:

  • 最新版的react-native-router-flux会在react-native 0.55.4版本出现isMounted(...)警告,可在App.js添加以下代码忽略警告。随后两个框架更新后,此警告也可消除。

    import { YellowBox } from 'react-native'
    YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
    
  • 触发路由:三种方式 (注意导入Actions组件)

    <Text onPress={Actions.movieList}>电 影</Text>
    <Text onPress={() => { Actions.movieList()}}>电 影</Text>
    <Text onPress={() => { Actions['about'].call() }}>关 于</Text>
    
  • 弹性布局参考: http://www.runoob.com/w3cnote/flex-grammar.html

开发组件(swiper)

  • 开源轮播图react-native-swiper

  • 源码地址:https://github.com/leecade/react-native-swiper

    应用场景:在首页展示轮播图

    安装方式:yarn add react-native-swiper

  • 常用属性:

    index={1} 					默认位置, 从0开始
    showsButtons={true} 		 是否显示按钮
    autoplayTimeout={2.5} 		 自动播放停留时间
    autoplay={true}				是否自动播放
    showsPagination={true}		 显示分页指示器
    

网络请求(fetch) *

  • Axios
  • fetch
  • componentDidMount执行请求并在回调中执行setState
    // 组件已经挂载
    componentDidMount() {
        const url = 'http://api.douban.com/v2/movie/in_theaters';
        fetch(url).then(res => res.json())
            .then(data => {
            // 处理网络json数据
            this.setState({
                isLoading: false,
                movieList: data.subjects
            })
            // console.warn(data.subjects)
        }).catch((err) => {
            console.error(err);
        });
    }
    

长列表(FlatList) *

  • 长列表优化

    <FlatList
        data={this.state.movieList}
        keyExtractor={(item, index) => item.id}
        renderItem={({ item, index }) => {
            return (
                <View style={{ padding: 10, flexDirection: 'row' }}>
                    <Text>{item.title}: {item.year} : {index} </Text>
                </View>
            )
        }}
     />
    
  • 加载指示器

    <View style={{ flex: 1, padding: 20 }}>
        <ActivityIndicator />
    </View>
    
  • 条目点击跳转

Actions.movieDetail({ "movieId": movie.id, "movieTitle": movie.title});

滚动视图(ScrollView)

  • 发送网络请求
  • 渲染视图

日志与调试

  • 查看RN日志:

    	react-native log-ios
    	react-native log-android
    

    android也可在PC控制台输入

    adb logcat *:S ReactNative:V ReactNativeJS:V

  • 应用内的错误与警告

    console.warn('Yellow.');
    console.error('Red.');
    
  • Debug调试

    • Chrome开发者工具
    1. 在Android设备菜单中选择“Debug JS Remotely”,PC会自动通过Chrome浏览器打开调试页面 http://localhost:8081/debugger-ui (需要自行安装Chrome)。这里注意自动打开的主机地址可能不是localhost,需要手动改成localhost (不修改,则手机页面可能是空白)

    2. 在Chrome浏览器按Ctrl + Shift + IF12打开控制台

    3. 选中Sources选项卡 -> Network标签 -> debuggerWorker.js 打开指定组件文件即可

    4. 如果没有没有debuggerWorker.js, 查看页面最下边的Status提示。

      Status: Another debugger is already connected

      另一个调试器已连接,直接使用或关闭那个调试器

      Status: Waiting, press Ctrl R in simulator to reload and connect.

      等待中,建议重新加载模拟器

    5. 可以在代码中打断点,Console中执行js代码打印变量、执行脚本

    6. 关闭调试:在Android设备菜单中选择“Stop Remote JS Debugging”即可

打包及发布


今天所有安装的包

  1. react-native-router-flux 路由

    应用场景:在RN项目中进行路由跳转时使用

    安装方式:yarn add react-native-router-flux

  2. react-native-swiper 开源轮播图

    应用场景:在首页展示轮播图

    安装方式:yarn add react-native-swiper

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
应用脚手架创建一个React项目

安装脚手架,这里会自动安装到你的nodejs里面 npm install create-react-app -g 进入创建目录 我这里创建一个为 react03的项目,等待下载。。。。。 create-react-app react03 创建成功后是这...

osc_1rwvn3a2
2018/01/02
2
0
跨平台移动开发实战(一)------总体架构和技术路线

最近两个月以来工作之余一直在做一件事情,就是把现在的产品移植到各主流移动平台上。其实需求很简单,就是想让现有的产品能在各大移动平台上有个端,让客户能移动办公。这个需求大概也是个大...

五大三粗
2015/05/31
0
0
高手问答第 192 期 —— 深入认识 React Native — 跨平台移动开发必备

OSCHINA 本期高手问答(4 月 4 日 - 4 月 10 日)我们请来了张益珲@珲少 和大家一起探讨关于使用 React Native 进行移动端跨平台应用开发的问题。 张益珲,工学学士,一位经验丰富的程序员,曾...

局长
2018/04/03
4.6K
39
Tonge/ionic2-amap

##how to use? git clone https://git.oschina.net/tonge/ionic2-amap cd ionic2-amap npm install ionic serve 作者:Tonge 出处:微信订阅号TongeBlog 版权申明:欢迎转载,但必须保留此段......

Tonge
2017/03/17
0
0
腾讯的76款开源软件

工具: AlloyDesigner(可视化Web构建工具)致力于提高前端生产效率的浏览器内运行工具。 AlloyLever(Web开发调试工具) APT(Android性能测试工具)无需源代码,支持第三方应用,适合小白用...

Doris1119
2016/11/14
88
0

没有更多内容

加载失败,请刷新页面

加载更多

Hacker News 简讯 2020-07-11

更新时间: 2020-07-11 01:01 Disabling Google 2FA Doesn't Need 2FA - (infoq.com) 禁用google2fa不需要2FA 得分:98 | 评论:33 Rackspace S-1 - (sec.gov) 机架空间S-1 得分:59 | 评论:20 S......

FalconChen
今天
142
0
是否有可能从另一个git存储库中挑选一个提交? - Is it possible to cherry-pick a commit from another git repository?

问题: I'm working with a git repository that needs a commit from another git repository that knows nothing of the first. 我正在使用一个git存储库,需要从另一个不知道第一个存储库......

技术盛宴
昨天
29
0
【LeetCode】53 盛最多水的容器

题目 解题思路 双指针法: https://leetcode-cn.com/problems/container-with-most-water/solution/sheng-zui-duo-shui-de-rong-qi-by-leetcode-solution/ 代码 public class Solution { ......

JaneRoad
昨天
20
0
阿里云OSS配置CDN加速

首先购买CDN流量包 然后添加域名 添加好后 然后将域名OSS.xxxx.com 解析到 生成的CDN域名上 这样就完成了

可达鸭眉头一皱
昨天
16
0
js 整数与小数正则替换片段

说明 /(\d+)/g 整数 /(\d+\.\d+)rem/g 小数 /(\d+\.\d+|\d+)rem/g 其中 | 或 条件 例子 全局查找带 rem 单位的,替换成 px 单位 let text = text.replace(/(\d+\.\d+|\d+)rem/g, function(s......

DrChenXX
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部