React Native
小波波1992
这个作者很懒,什么都没留下…
展开
-
React native学习第一章:Props
在React native中国里面有对props的定义:大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。import React, { Component } from 'react';import { AppRegistry, Image } from 'react-native';class Bananas extends Comp原创 2017-03-08 10:52:28 · 310 阅读 · 0 评论 -
React native学习第八章:嵌入到现有原生应用
参考:http://reactnative.cn/docs/0.42/integration-with-existing-apps.html#content文件目录:{ "name": "PlayGame", "version": "0.0.1", "private": true,原创 2017-03-14 15:24:17 · 1008 阅读 · 0 评论 -
React native学习第十一章:Modal
Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity)。在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。import React, { Component } from 'react'; import React, { Component原创 2017-03-20 14:41:41 · 466 阅读 · 0 评论 -
React native学习第十一章:MapView
annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: f原创 2017-03-20 14:04:33 · 1445 阅读 · 0 评论 -
React native学习第十章:ListView
ListView - 一个核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源,然后给它传递一个普通的数据数组,再使用数据源来实例化一个ListView组件,并且定义它的renderRow回调函数,这个函数会接受数组中的每个数据作为参数,返回一个可渲染的组件(作为listview的每一行)。等同于iOS的tablevie原创 2017-03-20 11:04:27 · 440 阅读 · 0 评论 -
React native学习第七章:ScrollView
ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置)。class TestScrollView extends Component{ render(){ return (原创 2017-03-09 13:51:25 · 261 阅读 · 0 评论 -
React native学习第六章:TextInput
TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性,会在文本被提交后(用户按下软键盘上的提交键)调用。class TestTextInput extends Component{ constructor(props)原创 2017-03-09 12:20:54 · 239 阅读 · 0 评论 -
React native学习第五章:Flexbox
我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。1.Flex Direction在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列,还是沿着竖直轴(column)方向排列呢?默认值是竖直轴(column)方向。class TestFl原创 2017-03-09 11:25:56 · 238 阅读 · 0 评论 -
React native学习第四章:宽高(Flex)
弹性(Flex)宽高 在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1,则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样,则谁的值更大,谁占据剩余空间的比例就更大(即占据剩余空间的比等于并列组件间flex值的比)。原创 2017-03-08 14:58:42 · 319 阅读 · 0 评论 -
React native学习第三章:样式
import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View } from 'react-native';class LotsOfStyles extends Component { render() { return ( just red原创 2017-03-08 14:17:52 · 224 阅读 · 0 评论 -
React native学习第二章:State
我们使用两种数据来控制一个组件:props和state。props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用state。一般来说,你需要在constructor中初始化state(译注:这是ES6的写法,早期的很多ES5的例子使用的是getInitialState方法来初始化state,这一做法会逐渐被淘汰),然后在需要修改时调用s原创 2017-03-08 13:22:19 · 248 阅读 · 0 评论 -
React native学习第九章:图片
import React,{Component} from 'react';import { AppRegistry, StyleSheet, Text, View, Image} from 'react-native';class RNHighScores extends React.Component { render() { var contents原创 2017-03-14 16:51:04 · 287 阅读 · 0 评论