Native中一些组件的用法

2019-09-18 22:44栏目:专项工作
TAG:

个人博客搭建达成,应接大家来拜会哦黎默丶lymoo的博客

个人博客搭建完结,招待我们来探问哦黎默丶lymoo的博客

私家博客搭建完毕,迎接大家来访谈哦黎默丶lymoo的博客

正文为我们介绍一下React-Native中部分常用的机件,由于对ES6的语法并从未完全调节,这里临时用ES5和ES6混用的语法。

本文为大家介绍一下React-Native中一些中肯些的机件,由于对ES6的语法并不曾完全精通,这里暂且用ES5和ES6混用的语法。

趁着新的移动网络的进步,这种能够跨平台混合开垦已经济体改成了一种趋势,混合开荒的人才要求越来越大,ReactNative是Twitter公布的一个能够进行混合开荒的框架,通过ReactNative能同不平日间为IOS和Android开辟应用程序,使用ReactNative开拓的应用程序,既保存了原生应用的性情,这种独具特殊的优越条件的人机交互的体会,又保留了ReactNative的精美的费用功效,它是把原生应用和Web应用的优点集一身。

View是多少个支撑Flexbox布局、样式、一些触动管理、和一部分无障碍功能的容器,并且它能够放置任何的视图里,也得以有自由三个随机档期的顺序的子视图。View的安顿性初志是和StyleSheet搭配使用,那样可以使代码更清楚并且赢得越来越高的品质。固然内联样式也一律能够行使。

能够调用移动平台的ScrollView的零部件,同不平时候还合併了触摸锁定的“响应者”系统。注意早晚要给scrollview多个冲天,恐怕是她父级的莫斯中国科学技术大学学。

是因为React-Native提供的零部件是对原生API的暴光。尽管我们是用js写的代码,但实质上调用的是原生API,原生的UI组件。体验上能够媲美原生应用。

flex布局样式backgroundColor:背景颜色borderColor:边框颜色borderWidth:边框大小borderRadius:圆角

onScrollBeginDrag:初叶拖拽的时候;onScrollEndDrag:截止拖拽的时候;onMomentumScrollBegin:起始滑动;onMomentumScrollEnd:初始滑动;

相比较于原生开拓,js学习开销低、语法灵活。允许让Web开垦者越多地基于现存经验开荒App。

import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';var ViewTest = React.createClass({ render () { return ( <View style={styles.container}> <View style={[styles.flex, styles.center]}> <Text style={styles.white}>酒店</Text> </View> <View style={styles.flex}> <View style={[styles.flex, styles.leftRightLine, styles.bottomLine, styles.center]}> <Text style={styles.white}>海外酒店</Text> </View> <View style={[styles.flex, styles.leftRightLine, styles.center]}> <Text style={styles.white}>特价酒店</Text> </View> </View> <View style={styles.flex}> <View style={[styles.flex, styles.bottomLine, styles.center]}> <Text style={styles.white}>团购</Text> </View> <View style={[styles.flex, styles.center]}> <Text style={styles.white}>民宿•客栈</Text> </View> </View> </View> ) }});var styles = StyleSheet.create({ container: { margin: 10, marginTop: 25, height: 75, flexDirection: "row", backgroundColor: "#ff607c", borderRadius: 5 }, flex: { flex: 1 }, white: { color: "white", fontWeight: "900", textShadowColor: "#ccc", textShadowOffset: {width: 1, height: 1} }, center: { justifyContent: "center", alignItems: "center" }, leftRightLine: { borderLeftWidth: 1, borderRightWidth: 1, borderColor: "white" }, bottomLine: { borderBottomWidth: 1, borderColor: "white" }});AppRegistry.registerComponent('HelloReact', () => ViewTest);

RefreshControl 以用在ScrollView或ListView内部,为其丰盛下拉刷新的效果。当ScrollView处于竖直方向的起源地点(scrollY: 0),此时下拉会触发三个onRefresh事件。

百分之90多分界面能够因而React-Native开荒,一份代码同不常候能够适配Android和iOS。并经过一些手段自动般配分裂荧屏尺寸的手提式有线电话机,再也无需团结去总括视图的轻重和任务。

最后效果:图片 1View组件效果图

创设三个scroll.js文件代码如下:

React-Native的调和比科尔多瓦不清楚好到哪儿去了。开启了实时重载之后,代码一改,app就自动更新成最新,对于UI的搭建简直是省了大多的编写翻译时间。同有的时候间可以张开XCode实时的观望有着的 log消息。

三个用以体现文本的React组件,况且它也支撑嵌套、样式,以及触摸管理。

import React, { Component } from 'react';import { StyleSheet, View, ScrollView, RefreshControl} from 'react-native';var dataSource = require("./data.json");// 创建组件var ScrollTest = React.createClass({ // 下面的几种函数可以根据自己的需求添加 _onScrollBeginDrag () { // 这里是开始拖拽的函数 }, _onScrollEndDrag () { // 这里是拖拽结束的函数 }, _onMomentumScrollBegin () { // 这里是开始滚动的函数 }, _onMomentumScrollEnd () { // 这里是滚动结束的函数 }, _refresh () { // 这里是请求数据的函数 alert; }, render () { return ( <ScrollView style={styles.container} onScrollBeginDrag={this._onScrollBeginDrag} onScrollEndDrag={this._onScrollEndDrag} onMomentumScrollBegin={this._onMomentumScrollBegin} onMomentumScrollEnd={this._onMomentumScrollEnd} refreshControl={ <RefreshControl refreshing={false} titleColor={"red"} title={"正在刷新......."} tintColor={"cyan"} onRefresh={this._refresh} /> }> <View style={[styles.item, styles.item1]}></View> <View style={[styles.item, styles.item2]}></View> <View style={[styles.item, styles.item3]}></View> </ScrollView> ) }});// 实例化样式var styles = StyleSheet.create({ container: { marginTop: 25, height: 300, borderWidth: 1, borderColor: "#ccc" }, item: { width: 280, height: 150, margin: 20 }, item1: { backgroundColor: "red" }, item2: { backgroundColor: "green" }, item3: { backgroundColor: "yellow" }});module.exports = ScrollTest;

大家知道AppStore核实流程一流久。而出于React-Native是用的js来写的代码,实时编写翻译的经过能让大家贯彻利用像网页同样做到热更新,随时发布。真正能够完结上架核实壹次,永恒0检查核对更新。

onPress:手指触摸事件numberOfLines :展现多少行

再将index.ios.js文件改成如下:

加载慢,安装包大。

color:字体颜色fontSize:字体大小fontWeight:字体加粗textAlign:对齐格局

import React, { Component } from 'react';import { AppRegistry, View,} from 'react-native';var Scroll = require("./scroll");var ScrollTest = React.createClass({ render () { return ( <View> <Scroll></Scroll> </View> ) }});AppRegistry.registerComponent('useComponent', () => ScrollTest);

实际的开荒情形教程能够查阅React-Native开辟情状教程,上边有很详细的牵线。重要便是安装一下风靡版本的Xcode,Homebrew,node,Watchman,Flow等,而且要力保自个儿的8081端口未有被攻克。

创办header.js和news.js四个文件header.js具体代码如下:

末段效果:图片 2ScrollView组件效果呈现

开采终端输入react-native init ProjectName,这里的ProjectName能够改成你想创设的项目名称。然后有三种艺术运转项目

import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';var Header = React.createClass({ render () { return ( <View style={styles.container}> <Text style={styles.font}> <Text style={styles.red}>网易</Text> <Text style={styles.white}>新闻</Text> <Text>有态度</Text> </Text> </View> ) }});var styles = StyleSheet.create({ container: { marginTop: 25, height: 44, alignItems: "center", justifyContent: "center", borderBottomWidth: 1, borderColor: "red" }, font: { fontSize: 25, fontWeight: "bold" }, red: { color: "red" }, white: { color: "white", backgroundColor: "red" }});module.exports = Header;

用来高效地体现一个得以垂直滚动的生成的多少列表。最主题的选用方法正是创造多个ListView.DataSource数据源,然后给它传递三个平淡无奇的数额数组,再使用数据源来实例化一个ListView组件,而且定义它的renderRow回调函数,那几个函数会接受数组中的各种数据作为参数,再次回到一个可渲染的零部件(作为listview的每一行)。

在终极找到刚才创立的门类步向它的门道如cd ProjectName,之后运转它react-native run-ios即可。

news.js具体代码如下:

ListView.DataSource为ListView组件提供高品质的多寡管理和访问。我们须求调用方法从原来输入数据中收取数据来创设ListViewDataSource对象,并用其开展数据变动的可比。DataSource起先化:

在品种中找到以xcodeproj为后缀结尾的公文双击,就能够在xcode张开项目,然后在xcode编辑器中式茶食击运营按键就能够运营。

import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';var News = React.createClass({ render () { var content = this.props.content; var newList = []; for (var i in content) { var text = <Text key={i} style={styles.font}>{content[i]}</Text>; newList.push; } return ( <View style={styles.container}> <Text style={styles.title}>今日要闻</Text> <View style={styles.container}> {newList} </View> </View> ) }});var styles = StyleSheet.create({ container: { margin: 10 }, title: { color: "red", fontSize: 18, fontWeight: "bold" }, font: { fontSize: 14, lineHeight: 35, fontWeight: "normal" }});module.exports = News;
getInitialState:function () {// 实例化DataSource对象 var ds = new ListView.DataSource({ rowHasChanged:(oldData,newData) => oldData !== newData }); return { data:ds.cloneWithRows }}

导入reactNative包,以及必需组件。AppRegistry:是经过Js运维reactNative应用的进口。StyleSheet:ReactNative中的样式表,类似于css样式表。

末尾在index.ios.js文件中期维修改代码为:

设置数据源:dataSource={this.state.dataSource}设置列表组件:renderRow={this._renderRow}设置ListView头部:renderHeader={this._renderHeader}设置列表项之间的区间:renderSeparator={this._renderSeparator}

创办ReactNative组件,模板中动用的是ES6的语法

版权声明:本文由ag真人发布于专项工作,转载请注明出处:Native中一些组件的用法