React Native常用的Text和Image组件

在ReactNative开发中，比较基础的组件：View、Text、Button、Image、ListView和Navigator

文本组件：Text

在React Native中，只有Text组件作为纯文本的子节点，但凡是和文本有关的，都是使用到Text组件。

import React from 'react';
import {Text, StyleSheet} from 'react-native';
export default function TextComponent() {
  return <Text style={styles.text}>文本组件</Text>;
}

const styles = StyleSheet.create({
  text: {
    color: 'red',
  },
});      

图片组件：Image

在React Native组件中，通过Image组件来引入图片：

<Image
          source={{
            uri: 'https://profile-avatar.csdnimg.cn/67927e8210de430e86d119a130c1dca2_xuelian3015.jpg!1',
          }}
          style={styles.image}
        />      

效果图：

如果是引入本地图片的话，得通过require来引入图片：

<Image source={require('../assets/0731.png')} style={styles.image} />      

不能使用字符串来预加载图片地址，因为React Native是在编译时处理所有的require声明，而不是在运行时动态的处理。所以在图片组件中是使用字符串来预加载图片地址的话，会是一片空白：

<Image source="../assets/0731.png" style={styles.image} />      

resizeMode

Image组件必须在样式中声明宽高属性，否不会显示。当Image的实际宽高和图片的实际宽高不一致的时候，是通过resizeMode来调整。

resizeMode提供了三个属性值：cover、contain、stretch

1. cover，在显示比例不失真的情况下填满整个显示区域
2. contain，要求是显示整张图片，可以对他进行等比例缩小
3. stretch，不考虑图片原来的宽高比，会填充整个Image定义的显示区域，这种情况下，图片可能变形和失真

3中模式下效果：