[React-Native]常用组件

一、Image组件

（1）引用本地图片
React Native提供了一种统一的方式来管理iOS和Android应用中的图片。 要向应用程序添加静态图片，请将其放在源代码树中的某个位置，并引用它，如下所示：

<Image source={require('./my-icon.png')} />

以与解析JS模块相同的方式解析映像名称。 在上面的示例中，打包程序将在与需要它的组件相同的文件夹中查找my-icon.png。 此外，如果您有my-icon.ios.png和my-icon.android.png，打包程序将为平台选择正确的文件。

您还可以使用@ 2x和@ 3x后缀为不同的屏幕密度提供图像。 如果您具有以下文件结构：

.
├── button.js
└── img
    ├── [e-mail]
    └── [e-mail]

button.js中调用

<Image source={require('./img/check.png')} />

（2）引用网络图片

<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

案例：

注意：

真机测试的话加载网络图片会出现不显示的问题，Google后查证，iOS9引入了新特性App Transport Security (ATS)。

新特性要求App内访问的网络必须使用HTTPS协议。

但是现在公司的项目使用的是HTTP协议，使用私有加密方式保证数据安全。现在也不能马上改成HTTPS协议传输。

重点内容

修改：

二、Text组件

React Native中文本用Text组件

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

class TextInANest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titleText: "Bird's Nest",
      bodyText: 'This is not really a bird nest.'
    };
  }

  render() {
    return (
        <Text style={styles.baseText}>
          <Text style={styles.titleText} onPress={this.onPressTitle}>
            {this.state.titleText}{'\n'}{'\n'}
          </Text>
          <Text numberOfLines={5}>
            {this.state.bodyText}
          </Text>
        </Text>
    );
  }
}

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

// App registration and rendering
AppRegistry.registerComponent('HelloWorld', () => TextInANest);

三、Slider滑动条组件

（1）属性和方法
maximumValue number
滑块的初始最大值。默认值为1。

minimumValue number
滑块的初始最小值。默认值为0。

onSlidingComplete函数
当用户完成更改值时调用回调（例如，释放滑块时）。

onValueChange函数
当用户拖动滑块时，连续调用回调。

滑块的步长值。该值应介于0和（maximumValue - minimumValue）之间。默认值为0。

四、View容器组件

构建UI的最基本的组件，View是一个容器，支持使用flexbox，样式，一些触摸处理和辅助功能控件的布局。 无论UIView，div，android.view等，直接查看映射到本地视图等效于任何平台上的React Native正在运行。视图被设计为嵌套在其他视图中，并且可以有0到许多任何类型的孩子。

示例：

class ViewColoredBoxesWithText extends Component {
  render() {
    return (
      <View style={{flexDirection: 'row', height: 100, padding: 20}}>
        <View style={{backgroundColor: 'blue', flex: 0.3}} />
        <View style={{backgroundColor: 'red', flex: 0.5}} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}