[React-Native]常用组件

前端之家收集整理的这篇文章主要介绍了[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> ); } }
原文链接:https://www.f2er.com/react/305067.html

猜你在找的React相关文章