[React-Native]常用组件

  1. 云栖社区>
  2. 博客>
  3. 正文

[React-Native]常用组件

蓬莱仙羽 2017-01-07 22:51:44 浏览769
展开阅读全文

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

网友评论

登录后评论
0/500
评论
蓬莱仙羽
+ 关注