第一章 flexbox 布局 1.flexDirection:'row', 水平 flexDirection:'column',垂直 需要在父元素上设置这种属性才能实现flex. flex:1 会撑满整个屏幕. demo:如果一行有3格,则所有的flex:1 ,这样会平分width; 在flexbox中一般view不用设置固定的高度,都是以子元素撑开父元素,设置相应的margin padding  之类的属性值 . 2.flexbox   中的width 与height  是没有单位的  一般

效果图: 进入工作目录,运行 react-native init NavigatorProject 创建项目NavigatorProject import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableHighlight, Image, Navigator } from 'react-native'; class navigatorProject extends

react-native页面之间的相互传值 之前在自己学习react-native的时候,在页面跳转和传值问题上花了一段时间去网上搜索和查找资料,自己总结了两个方法.可以参考 https://blog.csdn.net/shb2058/article/details/80390468 和 https://blog.csdn.net/shb2058/article/details/80432014首先设置一个不带参数的页面跳转使用navigation切换路由方法: this.props.navig

1. 利用react-native 事件DeviceEventEmitter 监听广播 应用场景: - 表单提交页面, A页面跳转到B页面选人, 然后返回A页面, 需要将B页面选择的数据传回A页面. - 多个多媒体来回切换播放,暂停后二次继续播放等问题. 代码如下:A页面 componentDidMount() { // 利用DeviceEventEmitter 监听 concactAdd事件 this.subscription = DeviceEventEmitter.addListener(

在 native 开发中,我们可以使用广播实现事件的订阅和事件的触发,从而实现不在该页面但是可以调用该页面的方法. 在 React Native 中,我们也可以使用 DeviceEventEmitter 实现类似的功能 该方法是官方 API,调用时,直接引用就行了. import {DeviceEventEmitter} from 'react-native'; //… //调用事件通知 DeviceEventEmitter.emit('xxxName’,param); //xxxName:通知

1.Android启动页面 思路:新建一个组件作为 Android 的启动页,index.android.js 的初始化窗口改为 Android启动页,设置定时器,使其在1.5秒后自动跳转到 Main 组件. GDLaunchPage.js /** * Android 启动页面 */ import React, { Component } from 'react'; import { StyleSheet, Image, Dimensions, } from 'react-native'; //

配置首页的轮播图 轮播图官网 运行npm i react-native-swiper --save安装轮播图组件 导入轮播图组件import Swiper from 'react-native-swiper'; 其中,在Swiper身上,showsPagination={false}是用来控制页码的:showsButtons={false}是用来控制左右箭头显示与隐藏:height={160}是用来控制轮播图区域的高度的! 设置轮播图的样式: var styles = StyleSheet.cr

页面跳转时,报  Undefined is not an Object(evaluating this2.props.navigation.navigate) 出错原因:在一个页面组件中调用了另一个组件,而跳转动作在被调用组件中定义.则会出现:当前呈现页面的this与跳转动作发生的this不一致,导致跳转动作不能被调用. 解决办法:在当前呈现页面获取跳转动作调用方法,作为参数传递给跳转动作发生组件. 例如: export default class PayFailedPage extends C

效果图如下: 代码实现: import React, {Component} from 'react'; import { ScrollView, Text, View, FlatList, } from 'react-native'; export default class Home extends Component { state = { dataObj: [ {dat: 123}, {dat: 123}, {dat: 123}, {dat: 123}, {dat: 123}, {dat

最近使用ReactNative做项目,有信心今天目标把ReactNative框架掌握,所以自己从每个知识点学习提高自己吧...... 步骤如下: 一.创建依赖包文件(package.json): React Native的植入过程同时需要React和React Native两个node依赖包.我们把具体的依赖包记录在package.json文件中. 如果项目根目录中没有这个文件,那就自己创建一个. 如果为了目录结构的美观,也可以在根目录下创建一个文件夹<这里我没有使用分文件夹,我懒得....当然

签名打包发布Release版本的apk安装包 请参考以下两篇文章: ReactNative之Android打包APK方法(趟坑过程) React Native发布APP之签名打包APK 如何发布一个apk 先保证自己正确配置了所有的 RN 环境 在 cmd 命令行中,运行这一句话keytool -genkey -v -keystore my-release-key2.keystore -alias my-key-alias2 -keyalg RSA -keysize 2048 -validity

调用摄像头拍照 react-native-image-picker的github官网 yarn add react-native-image-picker 运行react-native link自动注册相关的组件到原生配置中 打开项目中的android->app->src->main->AndroidManifest.xml文件,在第8行添加如下配置: <uses-permission android:name="android.permission.CAMERA&

电影列表 import React, { Component } from 'react' import { View, Image, Text, ActivityIndicator, FlatList, StyleSheet, TouchableHighlight } from 'react-native' const styles = StyleSheet.create({ movieTitle: { fontWeight: 'bold' } }) // 导入路由的组件 import { A

安装路由 运行yarn add react-native-router-flux 路由官网 路由相关配置 路由简单的DEMO // Main 才是项目的根组件 import React, { Component } from 'react' import { View, Image, Text, ActivityIndicator } from 'react-native' // 导入路由相关的组件 // Router: 就相当于 我们所学的 HashRouter // Stack: 这是一个分

配置Tab栏 配置Tab栏的图标 注意:使用图标,需要接收 license; /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; // 导入 Tabbar 相关的组件 import TabN

Alert - 弹窗 通过 Alert.alert() 方法调用唤起原生弹窗,点击会触发 onPress 回调(参考下方代码)并清除弹窗. import React, { AppRegistry, Component, StyleSheet, Alert, Text, View } from 'react-native'; class AwesomeProject extends Component { componentDidMount(){ Alert.alert( 'Alert标题', '

前言 动画对于客户端来说是非常重要的一部分,直接影响到应用的用户体验.前端对于动画优化通常使用CSS3样式来实现动画,以利用GPU加速特性.而React-Native由于渲染模式的不同,无法使用CSS样式的方式优化. React-Native的实现 React-Native在动画方面有两个主要方式,一个是Animated,一个是LayoutAnimation. Animated Animated动画库的原理是由JavaScript来进行动画的计算,然后在每帧设置对应组件的style来实现动画过程

前段时间搭建项目使用了navigator和react-native-tab-navigator,现在我教大家搭建一个通用的简单框架. 先把几张图贴在这里,这就是我们今天要搭建的东西,别看页面简单,但是可塑性强啊(我才不会说我已经懒到一定程度了呢...)! 1.     2.            3. 上面的三张图就是咱们要搭建的简单框架. 大家都知道,一般一个app都有导航.tabbar以及tabbaritem的子页面.那么上面的第一张就是导航初始化的页面,图2是tabbar的页面,图3就是t

参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup.html#content 1.安装Jdk(最好默认安装路径尽量别改) http://jingyan.baidu.com/article/a24b33cd59b58e19fe002bb9.html http://www.jb51.net/article/36811.htm(三个环境变量都配置)  Ja

本文直接引用大神文档: [WINDOWS环境 React Native初识]com.android.ddmlib.InstallException: Failed to establish session白屏问题解析 详情: 今天,可算改完了自己名下的bug.没辙,谁让自己太菜,妹子不爱,所以闲来无事,挥锄头动动ReactNative. ReactNative理论就不说了,反正网上多的是.我要是能说,我也不在这里废话了,直接进入实战. 首先,你得安装JAVA JDK,安装android环境,配置

react-native看到了给现有工程添加react-native环境的时候碰到一个问题: 如何往工程中添加 package.json文件,以及node_modules是怎么来的? 我开始的时候以为是自己创建的文件夹,package.json文件也是通过vim来写的. 但是就在写package.json时 写了一下我就感觉特别不方便.于是我想到了npm:node package manager. 尝试了一下,果然通过npm可以帮助我们完成这项任务. 具体操作: 1.进入你工程的根目录 2.np