react native学习笔记3——常见的基本组件简介

前端之家收集整理的这篇文章主要介绍了react native学习笔记3——常见的基本组件简介前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文是我整理的各个常用组件的基本使用方法,主要简要几个常见的基本组件,作为入门材料使初学者对RN中的常用组件有个直观的了解,快速入门,加强学习的成就感,增强学习RN的动力,不会面面俱到的详细讲解组件中的各个属性的含义及用法,如需深入了解可以查看官网文档

Demo代码的使用

相关的Demo代码可以在https://github.com/mronion0603/ReactNativeExercise下载,或者直接复制到你的工程里使用即可。
Demo的示例代码结构

├── index.android.js
└── index.ios.js
└── App.js
└── src
       ├── 01_componts
       └── images

在根目录下新建了一个App.js文件,在index.android.jsindex.ios.js中分别都import './App';所以不论你是运行Android还是IOS都可以只在./App中import你要尝试的组件代码,然后替换render中的组件。组件示例代码在src/01_componts文件夹中,图片资源在src/images中。
例如:App.js

import React,{ Component } from 'react';
import {
    AppRegistry,} from 'react-native';
import SectionListDemo from "./src/01_componts/SectionListDemo";
import FlatListDemo from "./src/01_componts/FlatListDemo";
import ScrollViewDemo from "./src/01_componts/ScrollViewDemo";
import TextinputDemo from "./src/01_componts/TextinputDemo";
import ImageDemo from "./src/01_componts/ImageDemo";
import ViewDemo from "./src/01_componts/ViewDemo";
import TextDemo from "./src/01_componts/TextDemo";
import CompontsTest from "./src/01_componts/CompontsTest";
export default class ExerciseProject extends Component {
    render() {
        return (
            <ViewDemo /> ); } } AppRegistry.registerComponent('ExerciseProject',() => ExerciseProject);

若想看看TextDemo 的效果,可以直接将<ViewDemo />替换为<TextDemo />

1.View

作为创建UI时最基础的组件,View通常用作容器,它可以放到其它的视图里,也可以有任意多个任意类型的子视图,支持FlexBox布局。View类似IOS中的UIView,Android中的android.view.View。

下面的例子创建了一个View,包含了三个有颜色的方块,并且设置了一个内边距:

import React,{Component} from "react";
import {View} from "react-native";

export default class CompontsTest extends Component {
    render() {
        return (
            <View style={{ backgroundColor: "#fff",flex: 1,padding: 20}}> <View style={{flex: 1,flexDirection:"row",backgroundColor: 'powderblue'}}/> <View style={{flex: 2,backgroundColor: 'skyblue'}} /> <View style={{flex: 3,backgroundColor: 'steelblue'}} /> </View> ) } }

效果图如下:

2.Text

一个专门用于显示文本的基本组件,类似IOS中的UILabel与Android中的TextView。并且它也支持嵌套、样式,以及触摸处理。

import React,{Component} from "react";
import {View,Text,StyleSheet,} from "react-native";

export default class CompontsTest extends Component {
    render() {
        return (
            <Text style={styles.outerText}>I am outerText! <Text style={styles.innerText}>I am innerText! </Text> </Text> ) } } const styles = StyleSheet.create({ outerText:{ textAlign:'center',color:'red',fontSize:28,fontFamily:'Cochin' },innerText: { color:'green',fontWeight:'bold',},});

效果图如下:

如果内部Text组件没有定义自己的样式,那么内部Text组件会继承外部组件的样式,哪一项自己没有定义,就会继承哪一项。

元素在布局上不同于其它组件:在Text内部的元素不再使用flexBox布局,而是采用文本布局。这意味着内部的元素不再是一个个矩形,而可能会在行末进行折叠。

3.TextInput

文本框输入组件,它有一个名为onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性,会在文本被提交后(用户按下软键盘上的提交键)调用

假如我们要实现当用户输入时,实时将其以单词为单位翻译为另一种文字。我们假设这另一种文字来自某个吃货星球,只有一个单词: pizza。所以”Hello there Bob”将会被翻译为”pizza pizza pizza”。

import React,{ Component } from 'react';
import { AppRegistry,TextInput,View } from 'react-native';

export default class TextinputDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {text: ''};
    }

    render() {
        return (
            <View style={{padding: 10}}> <TextInput  style={{height: 40}} placeholder="Type here to translate!" onChangeText={(text) => this.setState({text})} /> <Text style={{padding: 10,fontSize: 42}}> {this.state.text.split(' ').map((word) => word && '��').join(' ')} </Text> </View> ); } }

效果图如下:

4.Image

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

静态图片资源

<Image source={require('./my-icon.png')} />

使用混合App的图片资源

如果你在编写一个混合App(一部分UI使用React Native,而另一部分使用平台原生代码),也可以使用已经打包到App中的图片资源(以拖拽的方式放置在Xcode的asset类目中,或是放置在Android的drawable目录里)。注意此时只使用文件名,不带路径也不带后缀:

<Image source={{uri: 'app_icon'}} style={{width: 40,height: 40}} />

对于放置在Android的assets目录中的图片,还可以使用asset:/ 前缀来引用:

<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40,height: 40}} />

注意:这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在,而且还需要指定尺寸。

网络图片

很多要在App中显示图片并不能在编译的时候获得,又或者有时候需要动态载入来减少打包后的二进制文件的大小。这些时候,与静态资源不同的是,你需要手动指定图片的尺寸
。同时我们强烈建议你使用https以满足iOS App Transport Security 的要求。

// 正确
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400,height: 400}} />
// 错误
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />

注意:使用静态图片资源时可以不用设置宽高,使用网络图片需要手动指定图片的尺寸,否则什么都不显示

ImageBackground

ImageBackground是背景图片组件,是在rn 0.46版本加入的,它的用法类似Image,只不过可以嵌套其他组件

return (
  <ImageBackground style={{height:100,width:300}} source={require('../images/vip_account.png')}> <Text>Inside</Text> </ImageBackground> );

代码用法样例

import React,{Component} from "react";
import {StyleSheet,View,Image,ImageBackground,Text} from "react-native";

export default class ImageDemo extends Component {
    render() {
        return (
            <View style={{ backgroundColor: "#fff",padding: 20}}> <Image source={require('../images/vip_account.png')} /> <Image style={ImageDemoStyle.myimage} source={{uri: 'https://manhua.qpic.cn/vertical/0/21_14_21_96ed95f31667b3966cb0e0521ce13703_1498026084112.jpg/420'}}/> <ImageBackground style={{ height: 50,width: 50}} source={require('../images/vip_account.png')}> <Text>Inside</Text> </ImageBackground> </View> ) } } const ImageDemoStyle = StyleSheet.create({ container: { backgroundColor: "#fff",flex: 1,padding: 20 },myimage: { height: 70,width: 70,})

效果图如下:

5.ScrollView

ScrollView是一个通用的可滚动的容器,它可以嵌入多个组件和视图,而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置)。对应Android中的ScrollView,IOS中的UIScrollView。

import React,ScrollView} from "react-native";

export default class ScrollViewDemo extends Component {
    render() {
        return (
            <ScrollView> <Text style={{fontSize:96}}>Scroll me plz</Text> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Text style={{fontSize:96}}>If you like</Text> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Text style={{fontSize:96}}>Scrolling down</Text> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Text style={{fontSize:96}}>What's the best</Text> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Text style={{fontSize:96}}>Framework around?</Text> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Image source={require('../images/vip_account.png')} /> <Text style={{fontSize:80}}>React Native</Text> </ScrollView> ) } }

效果图如下:

ScrollView适合用来显示数量不多的滚动元素。放置在ScollView中的所有组件都会被渲染,哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表,那么应该使用功能差不多但性能更好的ListView FlatList组件。

6.FlatList

熟悉客户端开发的朋友看到这可能会问,为什么不是ListView,其实FlatList就是升级版的ListView,FlatList 主要是解决 ListView 的性能问题,数据量大时 ListView 性能较差,占用内存持续增加。官方在0.43版本加入了FlatList,并逐渐废弃Listview。
FlatList是高性能的简单列表组件,适用于展示长列表数据,和ScrollView
不同的是,FlatList并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。
一个简单的例子:

<FlatList
  data={[{key: 'a'},{key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>} />

data和renderItem是FlatList所必须的两个属性:
* data :列表的数据源
* renderItem :从数据源中逐个解析数据,返回一个设定好格式的组件来渲染。

完整的例子:

import React,FlatList,View } from 'react-native';

export default class FlatListDemo extends Component {
    render() {
        return (
            <View style={styles.container}> <FlatList  data={[ {key: 'Devin'},{key: 'Jackson'},{key: 'James'},{key: 'Joel'},{key: 'John'},{key: 'Jillian'},{key: 'Jimmy'},{key: 'Julie'},]} renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,paddingTop: 22 },item: { padding: 10,fontSize: 18,height: 44,})

该示例创建了一个简单的FlatList,并预设了一些模拟数据。首先是初始化FlatList所需的data,其中的每一项(行)数据之后都在renderItem中被渲染成了Text组件,最后构成整个FlatList。
效果图如下:

如果需要分组/类/区(section),推荐使用SectionList

7.SectionList

SectionList是高性能的分组(section)列表组件,其功能与FlatList类似。
其基本的写法如下:

<SectionList
  renderItem={({item}) => <ListItem title={item.title} />} renderSectionHeader={({section}) => <Header title={section.key} />} sections={[ // 不同section渲染相同类型的子组件 {data: [...],title: ...},{data: [...],]} /> <SectionList  sections={[ // 不同section渲染不同类型的子组件 {data: [...],renderItem: ...},{data: [...],]} />

一个简单的例子:

import React,SectionList,View } from 'react-native';

export default class SectionListDemo extends Component {
    render() {
        return (
            <View style={styles.container}> <SectionList  sections={[ {title: 'B',data: ['Bob','Bla','Boss']},{title: 'D',data: ['Devin','Dave','Dollor']},{title: 'J',data: ['Jackson','James','Jillian']},]} renderItem={({item}) => <Text style={styles.item}>{item}</Text>} renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,sectionHeader: { paddingTop: 2,paddingLeft: 10,paddingRight: 10,paddingBottom: 2,fontSize: 14,fontWeight: 'bold',backgroundColor: 'rgba(247,247,1.0)',})

效果图如下:

相关的Demo代码可以在https://github.com/mronion0603/ReactNativeExercise下载

原文链接:https://www.f2er.com/react/303121.html

猜你在找的React相关文章