React-Native中一些组件的用法(一)

个人博客搭建完成，欢迎大家来访问哦
黎默丶lymoo的博客

本文为大家介绍一下React-Native中一些常用的组件，由于对ES6的语法并没有完全掌握，这里暂时用ES5和ES6混用的语法。

View组件

View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。
View的设计初衷是和StyleSheet搭配使用，这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用。

View的常用样式设置

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

以手机端携程官网为示例

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);

最后效果：

Text组件

一个用于显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理。

常用特性

onPress：手指触摸事件
numberOfLines ：显示多少行

常用样式设置

color：字体颜色
fontSize：字体大小
fontWeight：字体加粗
textAlign：对齐方式

以手机端网易新闻为示例

创建header.js和news.js两个文件
header.js具体代码如下：

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;

news.js具体代码如下：

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(text);        }        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;

最后在index.ios.js文件中修改代码为：

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';var content = [    '1、新华社用"罕见"为里皮点赞:他是国足的不二选择',    '2、干部动员拆迁遭袭身亡 是否同意拆除双方说法不',    '3、母亲欠债遭11人凌辱 儿子目睹后刺死1人被判无期',    '4、美媒:美轰炸机进入中国东海防空识别区遭中方警告'];var Header = require("./header");var News = require("./news");var NewsNote = React.createClass({    render () {        return (            <View>                <Header></Header>                <News content={content}></News>            </View>        )    }});AppRegistry.registerComponent('WorkA', () => NewsNote);

最后效果：

Touchable类组件

该组件用于封装视图，使其可以正确响应触摸操作

常用样式设置

TouchableOpcity：透明触摸，点击时，组件会出现透明过度效果。
TouchableHighlight：高亮触摸，点击时组件会出现高亮效果。
TouchableWithoutFeedback：无反馈触摸，点击时候，组件无视觉变化。

示例

创建一个touchable.js的文件
里面代码为：

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableOpacity,    TouchableHighlight,    TouchableWithoutFeedback} from 'react-native';var Touchable = React.createClass({    getInitialState () {        return {times: 0}    },    handlePress () {        var sum = this.state.times;        sum++;        this.setState({times: sum});    },    render () {        return (            <View>                <TouchableOpacity style={styles.btn} onPress={this.handlePress}>                    <Text style={styles.text}>TouchableOpacity</Text>                </TouchableOpacity>                <TouchableHighlight underlayColor={"red"} onPress={this.handlePress} style={styles.btn}>                    <Text style={styles.text}>TouchableHighlight</Text>                </TouchableHighlight>                <TouchableWithoutFeedback onPress={this.handlePress}>                    <View style={[styles.btn, {width: 210}]}>                        <Text style={styles.text}>TouchableWithoutFeedback</Text>                    </View>                </TouchableWithoutFeedback>                <Text style={styles.text2}>点了{this.state.times}次</Text>            </View>        )    }});var styles = StyleSheet.create({    btn: {        marginTop: 25,        marginLeft: 20,        width: 150,        height: 30,        backgroundColor: "cyan",        borderRadius: 3,        justifyContent: "center",        alignItems: "center"    },    text: {        fontSize: 14,        fontWeight: "bold",        color: "blue"    },    text2: {        marginLeft: 25,        marginTop: 25,        fontSize: 16    }});module.exports = Touchable;

在index.ios.js文件中代码更改为：

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';var Touchable = require("./touchable");var TouchableTest = React.createClass({    render () {      return (          <View>            <Touchable></Touchable>          </View>      )    }});AppRegistry.registerComponent('useComponent', () => TouchableTest);

最后效果：图片转换成gif图可能会失去一些效果，点击TouchableOpacity按钮会变透明，点击TouchableHighlight按钮的背景颜色会改变，点击TouchableWithoutFeedback按钮没有任何变化

TextInput组件

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。

常用属性

placeholder占位符；
value 输入框的值；
password 是否密文输入；
editable 输入框是否可编辑
returnkeyType 键盘return键类型；
onChange 当文本变化时候调用；
onEndEditing 当结束编辑时调用；
onSubmitEding 当结束编辑提交按钮时候调动；
onChangeText:读取TextInput的用户输入；

示例

创建一个input.js的文件
里面代码为：

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TextInput} from 'react-native';var Input = React.createClass({    getInitialState () {        return {text: ""}    },    changeText (text) {        this.setState({text: text});    },    render () {        return (            <View style={styles.container}>                <TextInput returnKeyType={"done"} style={styles.input} placeholder={"请输入"} onChangeText={this.changeText}/>                <Text style={styles.text}>{this.state.text}</Text>            </View>        )    }});var styles = StyleSheet.create({    container: {        marginTop: 25    },    input: {        margin: 25,        height: 35,        borderWidth: 1,        borderColor: "red"    },    text: {        marginLeft: 35,        marginTop: 10,        fontSize: 16    }});module.exports = Input;

在index.ios.js文件中代码更改为：

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';var Input = require("./input");var InputTest = React.createClass({    render () {      return (          <View>            <Input/>          </View>      )    }});AppRegistry.registerComponent('useComponent', () => InputTest);

最后效果：

Image组件

一个用于显示多种不同类型图片的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。

静态图片加载

直接引入，代码如下：<Image source={require(‘./my-icon.png’)} />

网络图片加载

注意：网络图片请求http请求的xcode需要做一个设置info.plist里的Allow Arbitrary Loads后面的no改成yes。
通过source指定图片地址，代码如下：<Image source=(注意这里要双花括号，因为特殊原因只能显示单花括号){uri: ‘https://facebook.github.io/react/img/logo_og.png’}(注意这里要双花括号，因为特殊原因只能显示单花括号)/>

示例

创建一个image.js的文件，在保存一张图片至本地，这里为1.png
里面代码为：

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image} from 'react-native';var ImageTest = React.createClass({    render () {        return (            <View style={styles.container}>                <View style={styles.common}>                    <Image source={{uri:"http://i1.sanwen8.cn/doc/1609/852-160912105Q2I6.jpg"}}  style={styles.netImg}></Image>                </View>                <View style={styles.common}>                    <Image source={require("./1.png")} style={styles.localImg}></Image>                </View>            </View>        )    }});var styles = StyleSheet.create({    container: {        margin: 10,        marginTop: 25,        alignItems: "center"    },    common: {        width: 280,        height: 250,        backgroundColor: "cyan",        justifyContent: "center",        alignItems: "center",        marginBottom: 10    },    netImg: {        width: 280,        height: 220    },    localImg: {        width: 200,        height: 200    }});module.exports = ImageTest;

在index.ios.js文件中代码更改为：

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';var ImageComponent = require("./image");var ImageTest = React.createClass({    render () {      return (          <View>            <ImageComponent/>          </View>      )    }});AppRegistry.registerComponent('useComponent', () => ImageTest);

最后效果：

原文链接