ReactNative入门-ReactNative组件笔记

文字属性

常用

• fontsize
• color
• fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') 文字设置粗细
• fontFamily
  fontFamily有三种属性
  1. ‘PingFangSC-Regular’
  2. 'PingFangSC-Medium'
  3. 'PingFangSC-Light'

注意：项目中一般不用fontWeight而用fontFamily，否则可能导致手机最后文字显示不全

<Text style={{fontFamily:'PingFangSC-Regular',fontSize:13,color:'#FF552E'}}>

图片属性

• 加载网络图片

<Image source={{uri:global.image.add_url}} style={{width:10,height:10}}/>

• 加载本地图片

<Image style={{width:10,height:10}} source={{uri:imageName('video_record_blue_bg')}}/>

var windowScale = Dimensions.get('window').scale;
export function imageName(name) {
    let scale = windowScale.toString() ? (windowScale > 1 ? windowScale.toString() : '2') : '3';
    return Platform.OS == 'android' ? name : 'house_images.bundle/' + name + '@'
        + scale + 'x.png';
}

本地图片规范需自行定义

点击

• TouchableHighlight 官网api地址
  特点：高亮，只支持一个子节点

<TouchableHighlight underlayColor={'#ffffff'} onPress={this._onPress}>
        ...
</TouchableHighlight>

• TouchableOpacity 官网地址
  特点：支持多个子节点
  属性：
• activeOpacity 不透明度从0到1逐渐变深

<TouchableOpacity activeOpacity = {1.0} onPress={() =>this._btnPress(data)}>
    ...
</TouchableOpacity>

ScrollView

ScrollView是一个滑动组件，内部可以包裹多个组件，主要说一个属性refreshControl，他可以滑动组件支持下拉刷新，非常好用。

          <ScrollView
            refreshControl={
              (<RefreshControl
                refreshing={this.state.isRefreshing}
                onRefresh={this._onRefresh}
                tintColor="#BBBBBB"
                colors={['#DDDDDD', '#0398FF']}
                progressBackgroundColor='#FFFFFF'/>)
            }>

FlatList

FlatList是一个强大的列表控件，可支持上拉加载、下拉刷新以及头尾部view，详细属性可以看官网api

          <FlatList
            data={this.state.list}
            renderItem={({item}) => <ItemView data={item} navi={this.props.navigation}/>}
            ItemSeparatorComponent={() =>
              <View style={{height:10}}/>
            }
            onEndReachedThreshold={0.5}
            onEndReached={this._onEndReached}
          />