React Native常用的组件

一些一定要知道的组件

本章提要

  • View组件
  • Text组件
  • Button组件
  • Image组件
  • 第三方组件

很多组件是开发应用的基石,如果没有这些组件,那么是写不出来一个应用的,在这一章,我们来学习一些一定要知道的组件。

在使用组件的时候,忘记引入组件是不行的,我们来看一下怎么引入组件。

1
2
3
4
5
6
import {
Text,
View,
Button,
...其它的组件名字
} from 'react-native';

这样就可以依次引入Text,View和Button组件了~

View组件

这么说吧,第一个就介绍View组件是有原因的。View组件可是最最基础的组件,我们经常需要拿View组件当容器使用~
View自己没有固定的样式,我们需要自己为它定义样式。

1
<View style={{ backgroundColor:'green', height:50, width:50 }}></View>

这样,在屏幕上便可以出现一个绿色的,边长为50dp的正方形

PNG

样式什么的,我们会在下一章讲到,在这里简单看看就好。

Text组件

一般来说,一个应用总是离不开文字的,在React Native中,文字外面需要套上Text组件才可以,
我们可以通过Text组件控制文字大小及颜色,文字行数,还可以通过点击Text组件来触发一些动作(函数)。
栗子如下:

1
2
3
<Text numberOfLines={ 1 } style={{ fontSize:20, color:'green' }}>
略略略,略略略略略略,略略略略略略略略略,略略略略略略略略略略略略
</Text>

我们通过numberOfLines来控制行数,超过设定的行数便会在设定好的最后一行显示省略号。通过fontSize和color设定了文字的
大小及颜色。效果如下:

PNG

Button组件

Button组件大概是在0.37版加入的,在那之前按钮什么的要自己写,如果对官方出的这个不满意的话,那就自己写或找一些第三方组件吧~
我们写两个按钮当作栗子:

1
2
3
4
<View>
<Button color="green" title="我是一个正常的按钮"/>
<Button disabled={true} title="我是一个不可用的按钮"/>
</View>

PNG

由于写了两个组件,所以要在外面包裹一层容器,这里我们用View。这两个按钮一个是
正常状态,一个是不可用状态,我们通过控制disabled属性来控制是否可用(默认false)。按钮中的文字写在title里,color属性可以控制颜色。
由于按钮需要和onPress一起用,所以会有一个这样的警告:

PNG

不过暂时没什么问题,咱先不用管,以后用到的时候再写~

Image组件

在以前,用React Native引用组件总是很坑,不过现在比以前好多了。由于作者君木有苹果电脑,所以不怎么清楚IOS版是怎么用的,
我们就只说安卓的吧。
图片的来源有两种,一种是本地图片,一种是网络图片,这两种图片在引入的时候稍稍有些差别,我们先看引入本地图片的例子:

1
<Image source={require('./images/avatar.png')} style={{ height:50, width:50 }} />

我们在项目根目录创建一个叫images的文件夹,并在里面放一个叫avatar的图片。然后require图片地址,
使用图片组件要给它宽和高,不然无法正常显示。还有,如果图片没显示的话,记得重新执行

1
react-native run-android

然后是网络图片:

1
<Image source={{uri: 'http://qiniu.com/xxx/png}} style={{ height:50, width:50 }} />

在使用网络图片的时候,要将require改成uri,而且不写高度和宽度也没问题~

第三方组件

当你觉得官方组件有限,自己写又心好累,这时该怎么办呢?

当然是使用第三方组件啦~React Native社区越来越大,我们可以用的组件也越來越多,在这里,
作者君推荐两个搜索组件的地方:

其实js.coach的组件来源也是GitHub 23333

×

谢谢你请我吃辣条

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 一些一定要知道的组件
    1. 1.1. View组件
    2. 1.2. Text组件
    3. 1.3. Button组件
    4. 1.4. Image组件
    5. 1.5. 第三方组件
,