一些一定要知道的组件

本章提要

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

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

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

import {
  Text,
  View,
  Button,
  ...其它的组件名字
} from 'react-native';

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

View组件

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

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

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

PNG

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

Text组件

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

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

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

PNG

Button组件

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

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

PNG

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

PNG

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

Image组件

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

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

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

react-native run-android

然后是网络图片:

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

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

第三方组件

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

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

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

results matching ""

    No results matching ""