React Native 之 View使用

Posted 2022-12-03 黑森林工作室

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React Native 之 View使用相关的知识，希望对你有一定的参考价值。

前言

学习本系列内容需要具备一定 html 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢
文章第一版出自简书，如果出现图片或页面显示问题，烦请转至简书查看也希望喜欢的朋友可以点赞，谢谢

JSX 和组件的概念

React的核心机制之一就是虚拟DOM（可以在内存中创建的虚拟DOM元素）React利用虚拟DOM来减少对实际DOM的操作从而提升性能。传统的创建方式如下：
```
    var newBox = document.createElement('div');
    newBox.className = 'box';
    $('main').appendChild(newBox);
```
上面的代码在可读性方面比较不好，所以 React 开发了 JSX，利用我们熟悉的 HTML 语法来创建虚拟 DOM,创建方式如下：
```
    <div className="box">
    </div>
```
在实际开发中，JSX在产品打包阶段已经编译成纯 javascript, JSX的语法不会带来任何性能影响。所以，JSX可以看成是比较高级但依然直观的语法糖

View 组件中常见的属性

React Native 组件 View,其作用等同于ios中的 UIView,android中的 android.view 或者网页中的标签，它是所有组件的父组件，也可以说所有组件继承了它的所有属性
这边就将它常见的属性罗列出来：
- Flexbox：弹性布局（Flexbox的介绍可以点我）
- Transforms：动画属性
- backfaceVisibility(‘visible’, ‘hidden’)：定义界面翻转的时候是否可见
- backgroundColor：背景颜色
```
    // 背景颜色
    backgroundColor:'red'
```
效果：
- borderBottomColor：底部边框颜色
```
    // 底部边框宽度
    borderBottomWidth:5,
    // 底部边框颜色
    borderBottomColor:'green'
```
效果：
- borderBottomLeftRadius：底部左边边框圆角
```
    // 底部边框左圆角
    borderBottomLeftRadius:5
```
效果：
- borderBottomRightRadius：
```
    // 底部边框右圆角
    borderBottomRightRadius:5
```
效果：
- borderBottomWidth：底部边框宽度
```
    // 底部边框宽度
    borderBottomWidth:5
```
效果：
- borderColor：边框颜色
```
    // 全体边框宽度
    borderWidth:5,
    // 全体边框颜色
    borderColor:'yellow'
```
效果：
- borderLeftColor：左边框颜色
```
    // 左边边框颜色
    borderLeftColor:'black'
```
效果：
- borderLeftWidth：左边边框宽度
```
    // 左边边框宽度
    borderLeftWidth:10
```
效果：
- borderRadius：边框圆角
```
    // 全体边框宽度
    borderWidth:5,
    // 全体边框颜色
    borderColor:'black',
    // 全体边框圆角
    borderRadius:3
```
效果：
- borderRightColor：右边边框颜色
```
    // 右边框颜色
    borderRightColor:'yellow'
```
效果：
- borderRightWidth：右边边框宽度
```
    // 右边框宽度
    borderRightWidth:10
```
效果：
- borderStyle(‘solid’, ‘dotted’, ‘dashed’)：边框风格
  - solid
```
    // 边框风格
    borderStyle:'solid'
```
  效果：
  - dotted
```
    // 边框风格
    borderStyle:'dotted'
```
  效果：
  - dashed
```
    // 边框风格
    borderStyle:'dashed'
```
  效果：
- borderTopColor：顶部边框颜色（参考上面）
- borderTopWidth：顶部边框宽度（参考上面）
- borderTopLeftRadius：顶部左边圆角（参考上面）
- borderTopRightRadius：顶部右边圆角（参考上面）
- borderWidth：边框宽度
```
    // 全体边框宽度
    borderWidth:5
```
效果：
- opacity：设置透明度，取值从 0~1
```
    // 透明度
    opacity:0.5
```
效果：
- overflow(‘visible’, ‘hidden’)：设置内容超出容器部分是否显示（以后的文章讲解）
- elevation：高度，设置Z轴，可产生立体效果（以后文章讲解）

View 组件使用

简单使用


    render() 
    return (
      <View style=styles.container>
          <View style=width:300, height:100, backgroundColor:'red', borderWidth:1, borderColor:'black'>

          </View>
      </View>
    );

上面代码是我们熟悉的 CSS 写法
效果：
在 React Native 开发中，推荐我们采用 StyleSheet 来进行组件的布局，这样从代码结构上来看会更加清晰，有利于后期的维护

我们将上面的样式通过 StyleSheet 方式来实现

视图部分


    var test = React.createClass(
        render() 
            return (
                <View style=styles.container>
                    <View style=styles.viewStyle>

                    </View>
                </View>
            );
        
    );

样式部分


    var styles = StyleSheet.create(
        container: 
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        ,

        viewStyle: 
            // 尺寸
            width:300,
            height:100,
            // 背景颜色
            backgroundColor:'red',
            // 边框宽度
            borderWidth:1,
            // 边框颜色
            borderColor:'black'
        

    );

View 在开发中是经常会接触到的组件，灵活运用它可以帮助我们更好地结构化代码，甚至更方便的布局

以上是关于React Native 之 View使用的主要内容，如果未能解决你的问题，请参考以下文章

react-native-easy-app 详解与使用之 View，Text，Image，Fl

React Native 之 Flex

React Native之底层源码分析篇

React Native 开发之 (08) FlexBox例子

React Native 之组件的定义

React Native 之 View使用

前言

JSX 和 组件 的概念

View 组件中常见的属性

View 组件使用

View 在开发中是经常会接触到的组件，灵活运用它可以帮助我们更好地结构化代码，甚至更方便的布局

JSX 和组件的概念