学习reactnative
2017-02-21 13:29:00 weixin_33915554 阅读数 8

介绍

React Native 和React很像,但是与React使用web元素构建空间不同的是,React Native使用的是原生控件。所以需要了解基础的React概念,比如JSX、components、state 和 props。

Hello World

按照程序员古老的传统,第一个app必须是一个啥也不干,只显示hello world的App,如下:

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

Hello world 代码中有一些看起来不像JavaScript的东西,不要惊慌,这代表着未来。首先,ES2015(也称作ES6)是一种用于改进JavaScript的官方标准,但是还没有完全被所有的浏览器所使用。React Native 支持了ES2015的标准,所以开发者可以使用诸如import,from,class,extends和()=> syntax 这个样的ES2015功能。如果想要更详细的了解ES2015,这个网页也许对你有所帮助。

还有一些令人感到陌生的代码类似<Text>Hello world!</Text>。这就是使XML可以嵌入JavaScript的JSX语法。许多常见的框架为了可以在标记语言中嵌入代码都使用了各自特殊的方式来模板化标记语言。在React中,这正好反了过来,JSX可以在代码中嵌入标记语言。有些类似HTML中使用<div>或者<span>,React中使用了React的元素比如<Text>,用来显示一段文字。

元素和App注册

Hello World代码定义了一个新的元素(Component),并将其注册到了AppRegistry。当待见React Native应用时,开发者将会注册很多的元素(Component)。几乎所有在屏幕上显示出的东西,都是Component。一个Component可以非常简单-只需要一个 render方法来return JSX 并渲染。

APPRegistry告诉React Native 哪一个元素是真个应用的跟元素。开发者可以不同过多的考虑AppRegistry,有可能整个App只会调用一次AppRegistry.registerComponent一次。

结尾

Hello World让我们了解了 Component 和 JSX的概念,如果想要让App做更多的事情,接下来需要了解props。

2018-05-24 21:38:49 qq_17093685 阅读数 46

Native 和 JS互调原理Native调JS

  • Java JS端都准备JsModule映射表(Java在启动时创建JsModule映射表)

  • Java调用JSModule方法时,从Java映射表找到JsModule,调用Module的动态代理的方法,在动态代理里会callFunction通过JNI调用c层的callJsFunction

  • callJsFunction就是在c层通过WebKit调用js代码,在js注册表找到对应的jsModule,执行jsModule调用

JS调Native

  • 启动时c++向js层注入了c++的JSCExcutor对象,运行时js就可以通过这个对象和c层通信,Java创建NativeModule映射表,把映射表通过JNI存放到c层(启动时)

  • 在js使用NativeModules调用方法时,method会放进js的队列,等待被JAVA层调用,或者主动调用JSC,来遍历执行队列的方法

  • JSC遍历到方法时会调用callNative,根据方法要调用的NativeModule名,找到Java注册到c层的映射表里的NativeModuleWrapper,反射调用NativeModuleWrapper的invoke方法

  • 在Wrapper里反射调用NativeModule的方法

2019-07-04 20:28:30 example440982 阅读数 7

React Native 学习

离职后把之前落下的课程补起来,多花时间在“道”上,少花时间在“术"上。
基础原理、设计模式继续搞起来

介绍

用React开发原生应用的框架

环境搭建

官网

模拟器: 夜神、MuMu

基础知识

React 知识必备

数据


  • this.state 初始化数据,类似 vue 的 data
  • this.setState 更新数据,eg: this.setState({title: '新标题'})

基础组件


  • View——div
  • Text——span 文本必须用Text包裹
  • Image——image source={{uri: imgurl}} 网络图片需要设置宽高,本地路径用require引用
  • ScrollView 滚动组件,onScroll 事件
  • TextInput——input value={this.state.title}绑定数据,onChangeText={(value) => this.setState({title: value})} 双向绑定
  • Alert——是api,不是组件,Alert.alert() 方法弹框
  • FlatList 可是区域加载数据,节流,类似 ScrollView 的滚动加载
  • ActivityIndicator 加载icon

样式


  • 驼峰命名
  • 大小不需要单位
  • 无复合样式,eg:background,没有简写,只能一个个写样式
  • 所有元素都是 flex 布局,默认
  • 宽高百分百,只能通过 Dimensions 获取
const styles = StyleSheet.create({
  container: {
    width: Dimensions.get('window').width, // 获取设备宽度,=100%
    height: Dimension.get('window').height
    marginBottom: 10,
    padding: 10
  }
})
  • paddingHorizontal marginHorizontal 可以设置水平方向两个属性
  • paddingVertical marginVertical 可以设置垂直方向两个属性

布局


flex

默认是 column 方向,父容器要设置宽高,否则子元素 flex 属性无效,不设置宽高,flex 的父元素宽高为 0

  • flexDirection 设置主轴方向
  • jusitifyContent 主轴方向布局设置
  • alignItems 交叉轴方向

请求数据


  • fetch (推荐)
  • XMLHttpRequest
fetch(url)
  .then(response => response.json())  // response的原始数据
	.then(resp => console.log(resp)) // 返回的json数据,在这里使用
  • 返回 json 数据用 json 方法
  • text() 方法返回 text

遇到 ‘response body is locked’ 问题,可以这样解决, response.clone().json()

请求带参数

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json;chartset=UTF-8"
  },
  body: JSON.stringify({key:123, search:"hello"})
})
  .then(response => response.json())  // response的原始数据
	.then(resp => console.log(resp)) // 返回的json数据,在这里使用

第三方插件

swiper 轮播

  1. 可以自己实现,用 ScrollView
  2. react-native-swiper, 需要用的时候看官方文档

react-navigation 页面导航切换

createBottomTabNavigator 底部tabbar

若通过组件导出,需要放到 App.js render 的作为根组件

eg:

import BottomTabbar from './BottomTabbar'

...

render() {
  return (
  	<BottomTabbar />
  )
}

小结

入门难度不难,环境配置有点烦,如要进步快,还得来项目。

2019-01-08 16:58:20 lyl123_456 阅读数 22

React Native简介、环境搭建、使用技术

React Native环境搭建

  • 安装Node.js
    Node.js的安装路径:/usr/local/bin/node
    npm的安装路径:/usr/local/bin/npm
    检查安装是否成功: node -v 和 npm -v

  • 安装React Native
    安装指令:npm install -g react-native-cli

  • 安装辅助工具
    Nuclide开发工具:基于Atom的一个扩展
    注意:如果在Atom中安装不上,可以采用下载源码进行安装:

    git clone https://github.com/facebook/nuclide
    cd nuclide
    npm install
    apm link

    Chrome浏览器和Chrome插件:React Developer Tools
    Watchman工具:监控文件系统变更的工具,提高开发性能

  • 初始化项目
    react-native init 项目名
    注意:如果不成功可以尝试修改一下镜像源:

    npm config set registry https://registry.npm.taobao.org
    npm config set disturl https://npm.taobao.org/dist

  • 运行项目

    xcrun simctl list devices
    react-native run-ios --simulator “iPhone 7”

解析React Native开发的基础技术

  • Git版本控制工具
  • React Native的JSX解决方案
  • React Native的Flexbox布局
  • 调试React Native项目

React Native的开发实战

React Native组件

原生平台的适配和调试

React Native的服务器端处理

常用React Native API

React Native 混合编程

React Native与原生平台混合编程

电商App

App的发布和更新

App的发布

App的热部署

react native 学习

阅读数 2

react native的学习

阅读数 4

React native 学习

阅读数 4

react native学习

阅读数 46

React Native学习

阅读数 164

没有更多推荐了,返回首页