| description |
|---|
React Native常用的组件 |
本章提要
- View组件
- Text组件
- Button组件
- Image组件
- 第三方组件
很多组件是开发应用的基石，如果没有这些组件，那么是写不出来一个应用的，在这一章，我们来学习一些一定要知道的组件。
在使用组件的时候，忘记引入组件是不行的，我们来看一下怎么引入组件。
import {
Text,
View,
Button,
...其它的组件名字
} from 'react-native';
这样就可以依次引入Text，View和Button组件了~
这么说吧，第一个就介绍View组件是有原因的。View组件可是最最基础的组件，我们经常需要拿View组件当容器使用~ View自己没有固定的样式，我们需要自己为它定义样式。
<View style={{ backgroundColor:'green', height:50, width:50 }}></View>
这样，在屏幕上便可以出现一个绿色的，边长为50dp的正方形
样式什么的，我们会在下一章讲到，在这里简单看看就好。
一般来说，一个应用总是离不开文字的，在React Native中，文字外面需要套上Text组件才可以， 我们可以通过Text组件控制文字大小及颜色，文字行数，还可以通过点击Text组件来触发一些动作（函数）。 栗子如下：
<Text numberOfLines={ 1 } style={{ fontSize:20, color:'green' }}>
略略略,略略略略略略，略略略略略略略略略，略略略略略略略略略略略略
</Text>
我们通过numberOfLines来控制行数，超过设定的行数便会在设定好的最后一行显示省略号。通过fontSize和color设定了文字的 大小及颜色。效果如下：
Button组件大概是在0.37版加入的，在那之前按钮什么的要自己写，如果对官方出的这个不满意的话，那就自己写或找一些第三方组件吧~ 我们写两个按钮当作栗子：
<View>
<Button color="green" title="我是一个正常的按钮"/>
<Button disabled={true} title="我是一个不可用的按钮"/>
</View>
由于写了两个组件，所以要在外面包裹一层容器，这里我们用View。这两个按钮一个是 正常状态，一个是不可用状态，我们通过控制disabled属性来控制是否可用(默认false)。按钮中的文字写在title里，color属性可以控制颜色。 由于按钮需要和onPress一起用，所以会有一个这样的警告：
不过暂时没什么问题，咱先不用管，以后用到的时候再写~
在以前，用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(https://js.coach/react-native)
- GitHub(https://github.com/)
其实js.coach的组件来源也是GitHub 23333