[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.png

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> ); } }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!