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

最新推荐文章于 2020-04-25 16:54:23 发布
最新推荐文章于 2020-04-25 16:54:23 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： react-native 文章标签： react-native 前端框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_37582965/article/details/70344735
版权

个人博客搭建完成，欢迎大家来访问哦
黎默丶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);

最后效果：View组件效果图

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

最后效果：Text复合组件效果图

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

最后效果：Touchable组件效果图图片转换成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);

最后效果：Input组件效果图

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

最后效果：Image组件效果图

原文链接

黎默丶lymoo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React-Native之swiper(轮播组件)
蓝莓味的鱼
06-08 2437
使用说明：     1. 先安装React-native-swiper         npm i react-native-swiper –save     2. 导入Swiper         import Swiper from ‘react-native-swiper’;代码：import React, {Component} from 'react' import { Styl...
React Native 常用的组件
Y974066017的博客
04-13 1479
react常用组件
React Native－8.React Native TextInput组件详解
王学森的专栏
02-02 2万+
TextInput组件介绍输入框组件的主要属性如下： autoCapitalize : 枚举类型，可选值有none,sentences,words,characters.当用户输入时，用于提示。 placeholder：占位符，在输入前显示的文本内容。 value ： 文本输入框的默认值。 placeholdertTextColor : 占位符文本颜色。 password ： 如果为ture ， 则
React Native开发总结（一）
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
06-12 707
一、RN优劣势 React Native的设计理念： 既拥有Native的用户体验、又保留React的开发效率 优势： 它对比原生开发更为灵活，对比H5体验更为高效。 替代传统的WebView，打开效率更高，和原生之间的交互更方便。 多个版本迭代后的今天，它已经拥有了丰富第三方插件支持。 更方便的热更新。 劣势： 尽管是跨平台，但是不同平台Api的特性与显示并不一定一致。 ...
ReactNative组件的borderColor和borderRadius属性踩坑记录
热门推荐
桑心剑
12-14 2万+
问题 今天小程序平台项目中发现Android上自定义的ReactNative的Text组件样式显示不正确，具体表现如下图所示： 可以看到图中组件显示主要存在两个问题： 1、左右黑边；2、左右锯齿； 好嘛，这里自定义的组件是继承RN原有组件生成的，于是果断把同样的样式代码放到RN自己的Text组件里写个demo一看，竟然也有这两个问题。再换View组件也试一下，好吧，表现一样，demo代码如下： ...
React-Native中一些常用组件的用法详解(一)
08-30
主要跟大家分享了关于React-Native中一些常用组件的用法，其中包括View组件、Text组件、Touchable类组件、TextInput组件以及Image组件的使用方法，分别给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
在React Native项目中使用第三方库
xiangxiezhuren的专栏
09-01 4956
很多时候，最基础的API往往不能满足功能需求，这时我们需要使用一些优秀的第三方库。本文以开源库react-native-camera在React Native for iOS项目的使用为例来说明如何在项目中正确使用第三方库。
React-Native-Accordion:React Native 中的手风琴
08-05
React Native Accordion是一种在React Native应用中实现交互式折叠面板组件的方法。这个组件通常被称为“手风琴”，因为它的工作原理类似于传统乐器手风琴的展开和收缩。在React Native项目中，手风琴组件可以用于...
react-native-slider:纯 JavaScript react-native 和 react-native-web 组件
08-04
安装yarn add @miblanchard/react-native-slider 要么npm i --save @miblanchard/react-native-slider 1.xx 版本只支持 React Native >= 0.59.0 React Native 版本支持 react-native-slider 版本v0.59.0+ v1.xx用法 ...
react-native-form：一个简单的react-native组件，用于包装表单字段并仅使用一种方法即可获取其值
02-05
一个简单的本机组件，用于包装表单字段并获取其值，而无需将侦听器附加到各处。 安装 npm install --save react-native-form 用法 只需将您的字段放入表单中，并附上两个道具： name =>您检索值的键（必需） type ...
react-native-camera：React Native的Camera组件。 还支持条形码扫描！
02-05
React本机相机我们正在寻找此套件的维护者，或者为了使用expo-camera而不赞成使用此套件，没人愿意维护此套件文件在这里关注我们的文档赞助商如果您在商业/个人项目中使用此库，则可以通过使用IssueHunt.io为您选择...
在ReactNative中使用Redux简述
兔狲超凶的博客
04-13 6153
写在前面：在ReactNative中，常常会有下面这样的需求。就是像登录一样，登陆成功，我需要做很多事情，存储用户信息、把别的页面（或上一级页面）存在的头像昵称给显示出来。有可能还需要修改离登录页有两个层级页面上的数据。基于我现在使用的ReactNative0.51.0版本和react-navigtion1.5.+版本。虽然可以修改navigtion的goBack方法来回参。但是层级一深，将变得难...
React-Native中一些组件的用法(二)
黎默的博客
04-22 391
本文为大家介绍一下React-Native中一些深入些的组件，由于对ES6的语法并没有完全掌握，这里暂时用ES5和ES6混用的语法。
react组件中返回并列元素的方法
abc2346789的博客
06-14 1058
我们在写react组件的时候，经常会遇到这种问题，在render中return元素只能有一个顶级元素，比如div，假如写成这样就会报错: render(){ return( <div>123</div> <div>456</div> ) } 因为return中只能有一个顶...
react 的组件一级一级往外抛出的结构
qq_38719039的博客
04-08 443
如：组件一级一级抛出, （为了显现组件的出处）1. 一级目录抛出2. 二级目录抛出3. 在其他 复合组件中调用
react-native图片组件的使用
mockingbirds的专栏
01-05 7983
今天学习react-native图片组件，在react中，为我们提供了一个Image组件用来显示多种不同类型图片，包括了网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片等快速开始下面我创建一个叫做secondProject的工程用来学习Image组件。react-native init secondProject react-native android react-native run-a
react如何将组件内部的方法暴露给外部
mytac的博客
06-26 1万+
最近在项目中遇到一个问题，就是需要在类的外部调用操作类内部的方法。 举个例子，我有一个Toast组件，在外部需要调用它的show方法来控制他的显隐状态。 之前我的写法是写一个静态类方法，然后在constructor中去修改它的作用域，代码如下： // @flow import React from 'react'; import './style.less'; type Props={...
如何用React-Native Post Form 表单
让创意的火花散落到屏幕的每一个dp
01-27 1万+
今天使用react native 默认发送’Content-Type’: ‘application/json’ 的请求，但是现在想发送Form表单,该怎么写尼
React的函数式组件和类组件
weixin_45389051的博客
04-25 1692
先说一下函数式组件，他一般用于静态没有交互事件内容的组件页面 举个函数式组件的例子 function Childcom(props){ console.log(props.weather) let title = <h2>我是副标题</h2> let weather = props.weather let isGo = weather =="不下雨"?"不...
在react native中使用 react-native-echarts-pro组件的时候，图表会溢出容器，该如何将react-native-echarts-pro组件的大小设置成自适应容器的
最新发布
05-27
如果 react-native-echarts-pro 组件在 React Native 中的图表溢出容器，可以通过以下两种方法进行解决： 1.设置容器的大小 可以在容器组件中设置宽度和高度，然后将宽度和高度作为 props 传递给 react-native-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值