React Native中常用的组件-上

一、 View组件

React Native组件View，其作用等同于iOS中的UIView, Android中的android.view，或是网页中的

标签，它是所有页面组件的父组件。使用方式无差异化，基本用于容器使用。

const App: () => React$Node = () => {
    return (
        
          
            
              内容区域
            
          
        
    );
};

const styles = StyleSheet.create({
  view1: {
    width: 150,
    height: 200,
    backgroundColor:'purple',
    marginLeft: 100,
    marginTop: 100,
    padding: 30
  }
});

二、Text组件

一个用于显示文本的ReactNative组件，和Android中的TextView组件或者OC中的UILabel组件相类似，专门用来显示基本的文本信息；除了基本的显示布局之外，可以进行嵌套显示，设置样式，以及可以做事件(例如:点击)处理。

• 常用属性

`color` 字体颜色
 `numberOfLines` (number) 进行设置Text显示文本的行数，如果显示的内容超过了行数，默认其他多余的信息就不会显示了
`ellipsizeMode` 这个属性通常和下面的 numberOfLines 属性配合使用，表示当 Text 组件无法全部显示需要显示的字符串时如何用省略号进行修饰。取值：enum('head', 'middle', 'tail', 'clip')
`onPress` (fcuntion)  该方法当文本发生点击的时候调用该方法

 `color`  字体颜色
`fontFamily`  字体名称
`fontSize`  字体大小
`fontStyle`   字体风格(normal,italic)
`fontWeight ` 字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
`textShadowOffset`  设置阴影效果{width: number, height: number}
`textShadowRadius`  阴影效果圆角
`textShadowColor`  阴影效果的颜色
`letterSpacing`  字符间距
`lineHeight`  行高
`textAlign`   文本对其方式("auto", 'left', 'right', 'center', 'justify')
`textDecorationLine`  横线位置 ("none", 'underline', 'line-through', 'underline line-through')
`textDecorationStyle` 线的风格("solid", 'double', 'dotted', 'dashed')
 `textDecorationColor` 线的颜色
`writingDirection` 文本方向("auto", 'ltr', 'rtl')

• 课程代码

import React, { Component } from 'react';
import { Text, StyleSheet, View } from 'react-native';

export default class LKText extends Component {
    constructor(props) {
        super(props);
        this.state = {
            titleText: '撩课学院',
            subText: '喜欢IT,就上撩课！',
            bodyText: '对酒当歌，人生几何！对酒当歌，人生几何！对酒当歌，人生几何！'
        };
    }

    render() {
        return (
            <>
                
                    
                        {this.state.titleText}{'\n'}
                    
                    
                        {this.state.subText}
                    
                
                
                    
                        {this.state.bodyText}
                    
                
            
        );
    }
}

const styles = StyleSheet.create({
    baseText: {
        fontFamily: 'Cochin',
        fontSize: 30
    },
    titleText: {
        fontSize: 40,
        fontWeight: 'bold',
    },
});

三、Image组件

在开发中还有一个非常重要的组件Image，通过这个组件可以展示各种各样的图片，而且在React Native中该组件可以通过多种方式加载图片资源。包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。

• 常用使用，三种加载方式

 render() {
        return (
            
                {/*本地加载*/}
                
                {/*网络加载*/}
                
                {/*base64加载*/}
                
            
        );
    }

• 设置图片的显示模式，resizeMode，常用取值有：center、repeat、contain、cover、stretch。

render() {
        return (
            
                
            
        );
    }

• 设置背景图片-ImageBackground组件

 render() {
        return (
            
                
                    
                    我是小撩同学！
                
            
        );
    }

• Image组件的小练习

通过一款包包的展示，总结前面所学的View，Text和今天的Image组件，具体效果如下:

image.png

核心代码：

_renderItem() {
        // 1. 组件数组
        let itemArr = [];
        // 2. 遍历数据数组
        for (let i = 0; i < dataArr.length; i++) {
            // 2.1 取出单个数据
            let data = dataArr[i];
            // 2.2 根据数据创建组件装入组件数组
            itemArr.push(
                
                    
                    {data.name}
                
            )
        }
        // 3. 返回数组
        return itemArr;

    }