[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
├── check@2x.png
└── check@3x.pngbutton.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>
);
}
}
