Android React-Native系列之零基础学习React-Native控件之View

转载请注明出处：http://blog.csdn.net/llew2011/article/details/51068619

在上一篇博文中已经讲解了React-Native开发环境的搭建流程，还没有搭建好环境的童靴可以参照Android React-Native系列之<一>零基础搭建React-Native开发环境或者是参照其他大神的博文。今天主要讲解的是React-Native下的View组件的简单使用，如果你已经掌握了View组件的相关知识那你就可以跳过本文了(*^__^*)......

学习任何一门新的语言或者是新的技术，看官方指导文档则是必不可少的，React-Native为Facebook开源项目，如不清楚官网指导网址请点击这里，如果英语水平有限，则国内有个对应的中文学习网址，前去查看请点击这里，有了这两个网址学习React-Native就可以说是障碍不大了，即使有问题我相信你也可以通过谷哥或度娘或必应解决的。

在学习View组件前我们先大致浏览一下官网给出的Demo，打开AwesomeProject工程，文件结构如下图所示：

从文件结构上可以看出该目录下包含了android和ios两个文件夹，猜测这两个文件夹应该是分别对应Android平台和iOS平台下的工程，进入android目录下你会发现这确实是在Android Studio下的配置，ios也应该是同样的道理。除了android和ios文件夹外还有一个node_modules模块，点击进入该文件夹后发现包含了好多模块，这些模块应该是React-Native运行时所需要的环境吧？这里仅仅也是猜测，在不熟悉其作用的前提下我们不要动这里边的内容。除了以上三个文件夹外还有三个文件，分别是index.android.js，index.ios.js和package.json文件，其中index.android.js和index.ios.js文件分别是运行Android和iOS的入口，系统运行时会根据文件名称选择运行哪个文件的，package.json是一个React-Native配置文件，里边主要配置了版本号，工程名称还有所依赖的react的版本号等。以上仅仅根据自己理解简单介绍了一下，后期再继续深入了解吧，(*^__^*) 嘻嘻……

在React-Native中View是作为创建UI的最基本的控件，它可以嵌套其他视图中也可以有任意类型的子视图(这种嵌套特性相当于Android平台下的ViewGroup)，它对应了一个平台的原生视图，比如是Android下的View，iOS下的UIView或者是Web下的<div>。View是一个支持Flexbox布局、样式、一些触摸处理和一些无障碍功能的容器，我们先看一下index.android.js文件内容，原文件如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

该js文件首先是通过import关键字引入了一些组件(引入方式应该是和android下的引入是类似的)，这里主要引入了StyleSheet，Text和View等，根据以往经验可推测我们在后期开发中如果需要用到其他组件的话，那直接就在这里边写应该是可行的，这种猜测在后来的React-Native练习中证明是正确的。我们接着往下下看代码，紧接着又定义了AwesomeProject类，该类继承了Component，Component类是干嘛的，很抱歉我暂时还不知道，那只能在后续的学习中再继续了解了~~~~(>_<)~~~~，在AwesomeProject的render方法中可以看出返回了一个以View为根节点的布局文件，这种布局文件和Android下的布局文件类似。细心的童靴们会发现组件View、Text都有一个style属性，该style属性和Web中的css样式属性是类似的，是用来控制控件的展现的。再接着是通过StyleSheet.create()定义了一个全局的称为styles的样式器，在该样式器下分别定义了各种样式，比如container、welcome等样式(这些样式属性都可以通过官网查询)。

通过以上对index.android.js文件的初步认识，我们可以尝试着更改一些我们可以确定的部分属性值，比如更改背景颜色，文字大小等，修改后的样式文件如下：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#aabbcc',
  },
  welcome: {
    fontSize: 30,
    textAlign: 'center',
    color: '#ae81ff',
    margin: 20,
  },
  instructions: {
    textAlign: 'center',
    color: '#6fdc70',
    marginBottom: 15,
  },
});

更改完样式之后，我们可以刷新界面，点击模拟器后可以直接摁住command+m组合键，弹出选项菜单，第一项是Reload JS选项，我们选中后模拟器就可以直接加载页面了，这种动态更新效果比Android开发的效率高多了，在模拟器和对比看一下修改前和修改后的效果，运行截图如下：

通过运行结果可以明确看出，我们修改的背景色，文字大小，文字颜色已经改变了。开始学习View之前先根据官网学习一下在RN中style的用法吧。

声明样式
在RN下倡导以StyleSheet.create()的方式来声明样式，并且建议把样式的声明放置在文件的结尾处。需要说明的是使用StyleSheet.create()来创建样式不是必须的，因为我们可以在render方法中直接创建样式达到同样的效果。使用StyleSheet创建的好处就是它可以把这些样式值转化为扑通的数字id，这些数字的id指向一个内容的样式表，以此来使得样式值变得不可更改和不可见，同时也便于后期样式更改和维护。官网建议把样式声明放到文件的末尾的好处是可以确保这些样式只在应用中被创建一次，而不是在每次渲染(在render方法中)时都被重新创建。好了，我们通过StyleSheet来创建简单的样式吧，创建样式如下：
```
var styles = StyleSheet.create({
  base: {
    width: 38,
    height: 38,
  },
  background: {
    backgroundColor: '#222222',
  },
  active: {
    borderWidth: 2,
    borderColor: '#00ff00',
  },
});
```
使用样式
根据官网可知，在RN下所有的核心组件都可以接受style属性。使用样式如下：
```
<Text style={styles.base} />
<View style={styles.background} />
```
样式还可以接受数组的形式，使用如下：
```
<View style={[styles.base, styles.background]} />
```
【注意：】如果样式接受数组的形式，则最右边的元素优先级最高，也就是说如果styles.base和styles.background中使用了同一个元素那最终展现结果以styles.background中定义的元素为准。
如果我们不想使用StyleSheet的方式，还可以直接在render方法中创建样式，定义如下：
```
<View style={
  {
    width: 30,
    height: 30,
    backgroundColor: '#00bfff',
  } 
}></View>
```
这种在render方法中定义样式是可行的，但是不建议这么做因为每次渲染时样式都会被重建，这样会带来较大的性能开销。如果使用多个样式，需要把这种动态样式放到数组的最后，代码如下：
```
<View
  style={[
  	styles.base, 
  	{
      width: 400,
      height: 300,
  	},
  ]}
></View>
```

样式的定义和使用就简单介绍到这里，趁热打铁，接下来我们就通过官方文档来练习View组件各属性的简单用法吧。通过查阅官网我们知道RN的View组件是支持Flexbox布局的(弹性布局，用来为盒装模型提供强大的灵活性)，对不清楚Flexbox布局的童靴们请自行查阅(这篇文章讲解的不错)，那我们接下来修改在类Awesomeproject中render方法的返回的布局文件，我们把原先View视图中嵌套的Text组件删除，前文说过在RN下View是可以嵌套View的，我们就重新定义View组件样式属性，测试代码如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>

        <View style={styles.custom_container}>
          <View style={styles.custom_container_inner}></View>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#aabbcc',
  },
  custom_container: {
    width: 400,
    height: 300,
    backgroundColor: '#7cb342',
    borderBottomWidth: 20,
    borderBottomColor: 'darkgray',
    borderLeftWidth: 10,
    borderLeftColor: 'antiquewhite',
    borderRightWidth: 5,
    borderRightColor: 'crimson',
    borderTopWidth:2,
    borderTopColor: 'black',
    paddingLeft: 130,
    paddingTop: 110,
    // borderStyle: 'dotted',
    // borderRadius: 10,
    // borderBottomLeftRadius: 50,
  },
  custom_container_inner: {
    width: 150,
    height: 55,
    backgroundColor: '#e32a61',
    borderWidth: 1,
    borderRadius: 5,
    borderStyle: 'dashed',
    borderColor: '#ffffff',
  },//以逗号结尾
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

以上主要是熟悉和练习View组件的常用的样式属性，比如宽高、背景色、边框宽度、边框颜色、圆角等(View的事件属性部分会在后续文章中做单独讲解)。书写完样式属性和布局文件之后，点击模拟器，摁command+m组合键，在弹出操作列表对话框中选第一个Reload JS选项，刷新界面运行结果如下图所示：

【注意：】在练习View属性borderRadius和borderStyle的时候，通过测试发现只有这两者结合时borderStyle属性才起作用。

下表是根据官网和自己做练习后总结的，不对之处欢迎指正。

View样式属性说明
属性名	属性值	使用说明
backfaceVisibility	[visible \| hidden]	该属性为枚举类型，只能选择其中一个
backgroundColor	[color]	该属性为颜色值，详见Colors
borderBottomColor	[color]	底部边框颜色值，详见Colors
borderBottomLeftRadius	[number]	View左下角圆角大小，为number类型
borderBottomRightRadius	[number]	View右下角圆角代销，为number类型
borderBottomWidth	[number]	View下边框宽度，为number类型
borderColor	[color]	View四边边框颜色，详见Colors
borderLeftColor	[color]	View左边框颜色，详见Colors
borderLeftWidth	[number]	View左边框宽度，为number类型
borderRadius	[number]	View四边圆角大小，为number类型
borderRightColor	[color]	View右侧边框颜色，详见Colors
borderRightWidth	[number]	View有边框宽度，为number类型
borderStyle	[solid \| dotted \| dashed]	该属性为枚举类型，只能选择其中一个
borderTopColor	[color]	上边框颜色值，详见Colors
borderTopLeftRadius	[number]	左上角圆角大小，为number类型
borderTopRightRadius	[number]	右上角圆角大小，为number类型
borderTopWidth	[number]	上边框宽度小大，为number类型
borderWidth	[number]	四边边框大小，为number类型
opacity	[number]	透明度，为number类型
overflow	[visible \| hidden]	该属性为枚举类型，只能选择其中一个
alignItems	[flex-start \| flex-end \| center \| stretch]	水平方向布局，只能选择其中一个
borderWidth	[number]	View四边框大小，为number类型
flex	[number]	可自由伸缩(只有大于0才起作用)，设置flex后height不起作用
justifyContent	[flex-start \| flex-end \| center \| space-between \|space-around]	竖直方向布局，只能选择其中一个
margin	[number]	作用和Android下的layout-margin作用类似，为number类型
padding	[number]	作用和Android下的padding作用类似，为number类型
shadowColor	[color]	背影颜色，详见Colors
shadowRadius	[number]	背影圆角大小，为number类型
shadowOpacity	[number]	背影透明度，为number类型

好了，到这里View的简单使用就介绍了完了，如有不正确的地方欢迎指正。接下来是有关Text控件的学习，敬请期待......

llew2011

发布了39 篇原创文章 · 获赞 87 · 访问量 18万+

私信关注

Android React-Native系列之零基础学习React-Native控件之View

猜你喜欢