05-RN常用的组件-上

一、 View组件

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

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

const App: () => React$Node = () => {
    return (
        <SafeAreaView style={{flex: 1}}>
          <View style={{flex: 1, backgroundColor: 'cyan'}}>
            <View style={styles.view1}>
              <Text style={{color: '#fff', fontSize: 18}}>内容区域</Text>
            </View>
          </View>
        </SafeAreaView>
    );
};

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 (
              <>
                  <Text style={styles.baseText}>
                      <Text style={styles.titleText}>
                          {this.state.titleText}{'\n'}
                      </Text>
                      <Text>
                          {this.state.subText}
                      </Text>
                  </Text>
                  <View style={{backgroundColor:'red', width: 300, height: 200}}>
                      <Text
                          style={{fontSize: 20, lineHeight: 40}}
                          numberOfLines={4}
                          ellipsizeMode='middle'
                      >
                          {this.state.bodyText}
                      </Text>
                  </View>
              </>
          );
      }
  }
  
  const styles = StyleSheet.create({
      baseText: {
          fontFamily: 'Cochin',
          fontSize: 30
      },
      titleText: {
          fontSize: 40,
          fontWeight: 'bold',
      },
  });

三、Image组件

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

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

  render() {
         return (
             <View>
                 {/*本地加载*/}
                 <Image
                     source={require('./images/bit.jpeg')}
                     style={{width: 200, height: 200}}
                 />
                 {/*网络加载*/}
                 <Image
                     style={{width: 168, height: 168}}
                     source={{uri: 'http://www.itlike.com/template/simple/res/404/img/xiaoliao.png'}}
                 />
                 {/*base64加载*/}
                 <Image
                     style={{width: 66, height: 58}}
                     source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
                 />
             </View>
         );
     }

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

render() {
        return (
            <View>
                <Image
                    style={{width: 400, height: 300, resizeMode: 'stretch', backgroundColor:'red'}}
                    source={{uri: 'http://www.itlike.com/template/simple/res/404/img/xiaoliao.png'}}
                />
            </View>
        );
    }

• 设置背景图片-ImageBackground组件

  render() {
         return (
             <View>
                 <ImageBackground
                     source={require('./images/lk.jpg')}
                     style={{width: 400, height: 200}}
                 >
                     <Image
                         style={{width: 168, height: 168}}
                         source={{uri: 'http://www.itlike.com/template/simple/res/404/img/xiaoliao.png'}}
                     />
                     <Text style={{color:'#fff'}}>我是小撩同学！</Text>
                 </ImageBackground>
             </View>
         );
     }

• Image组件的小练习

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

核心代码：

_renderItem() {
        // 1. 组件数组
        let itemArr = [];
        // 2. 遍历数据数组
        for (let i = 0; i < dataArr.length; i++) {
            // 2.1 取出单个数据
            let data = dataArr[i];
            // 2.2 根据数据创建组件装入组件数组
            itemArr.push(
                <View key={i} style={styles.itemViewStyle}>
                    <Image source={{uri: data.icon}} style={{width:80, height:80}}/>
                    <Text>{data.name}</Text>
                </View>
            )
        }
        // 3. 返回数组
        return itemArr;

    }

04-Flex布局

06-RN常用的组件-中