ReactNative学习——常用控件使用

1、Text

相当于Android中的TextView,用于显示文本

Text属性官方文档:http://reactnative.cn/docs/0.47/text.html#content

2、TextInput

相当于EditText控件,用户接收用户输入的信息

常用属性:

其他属性可参照官方文档:http://reactnative.cn/docs/0.47/textinput.html#content

autoCapitalize

首字母自动大写,Android上好像没什么效果,我在模拟器上运行的,并没看到效果

  • none:不自动变为大写
  • sentences:将每句话的首字母自动改成大写
  • words:将每个单词的首字母自动改成大写
  • characters:将每个英文字母自动改为大写
placeholder

在没有输入任何内容时,显示的占位字符,等同于android中的android:hint属性

value

设置内容,等同于android中的android:text属性

placeholderTextColor

占位符文字颜色,等同于android中的android:textColorHint属性

password

设置为true后,输入的内容将以私密形式显示,在android中好像没效果;要对输入内容做私密显示用secureTextEntry={true}属性
等同于android中的android:password="true"

maxLength

限制最大可输入内容长度,和android中的maxLength一样,使用时有需要注意,值应该用{}包起来,否则会报错

 maxLength={5}
keyboardType

设置键盘样式,等同于android中的android:inputType

  • default
  • numeric 数字键盘
  • email-address
  • phone-pad
onChange

文字变化监听,回调方法不带文字内容

onChangeText

文字变化监听,回调方法带文字内容

onEndEditing

输入状态结束时回调

3、Image

相当于android中的ImageView控件

常用属性:

Image属性官方文档:http://reactnative.cn/docs/0.47/image.html#content

source

图片源,等同于android中的src,但功能比ImageView更强大,可接受来自网络或者本地资源图片

uri:可以加载网络图片

require:加载本地图片,相对路径

android下可以支持png、jpg、jpeg、bmp、gif、webp格式图片,需要添加下面的第三方库

dependencies {
  // 如果你需要支持Android4.0(API level 14)之前的版本
  compile 'com.facebook.fresco:animated-base-support:1.0.1'

  // 如果你需要支持GIF动图
  compile 'com.facebook.fresco:animated-gif:1.0.1'

  // 如果你需要支持WebP格式,包括WebP动图
  compile 'com.facebook.fresco:animated-webp:1.0.1'
  compile 'com.facebook.fresco:webpsupport:1.0.1'

  // 如果只需要支持WebP格式而不需要动图
  compile 'com.facebook.fresco:webpsupport:1.0.1'
}

4、Button

这个没什么好说的,和android中的Button没多大区别

Button属性官方文档:http://reactnative.cn/docs/0.47/button.html#content

5、ListView

和Android中ListView一样,用于展示数据,但使用上有很大差异

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

class ListViewDemoActivity extends React.Component {
    constructor(props) {
        super(props);

        //数据源
        let datas = ["列表数据1","列表数据2","列表数据3","列表数据4"];

        //设置notifyDataSetChanged
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

        //dataSource就是遍历出的数组元素
        this.state = {
            dataSource: ds.cloneWithRows(datas),
        };
    }

    render() {
        return (
            <ListView
                initialListSize={3}
                dataSource={this.state.dataSource}
                renderRow={(rowData) => <Text style={styles.itemText}>{rowData}</Text>}
            />
        );
    }
}

let styles = StyleSheet.create({
    itemText:{
        marginTop:10,
        backgroundColor:"#ff0000",
        paddingTop:15,
        paddingBottom:15,
        textAlign:"center",
        color:"#ffffff"
    }
})


export default ListViewDemoActivity



附:Demo地址:https://github.com/cenxiaoping/ReactNativeDemo

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 131,915评论 20 560
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 3,344评论 0 4
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 79,641评论 12 120
  • 纪实生活 体悟人生 相传“奇门遁甲”与“太乙神数” “大六壬”号称为三大奇书 而“奇门遁甲”自古又列为 帝王之学 ...
    木风恒阅读 32评论 0 0
  • 我希望, 烟囱里飘出来的, 不是浓浓的黑烟, ...
    jjiagaga阅读 28评论 0 0