react-native布局与组件

<View style={{width:100,height:100,margin:10,backgroundColor:'gray'}}>
  <Text style={{fontSize:16,margin:20}}>尺⼨寸</Text>
</View>

<text style={[styles.aaa,{color:'red'}]}></text>

{/* 错误的实例：不生效 */}
<view style={[styles.aaa,{color:'red'}]}></view>

<SafeAreaView style={{backgroundColor:'red'}}></SafeAreaView>

      <SafeAreaView style={{flex:1}}>
        <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}}
        />
      </SafeAreaView>

                <Text
          ellipsizeMode={"tail"} //这个属性通常和下⾯面的 numberOfLines 属性配合使⽤用,⽂文本超出 numberOfLines设定的⾏行行数时，截取⽅方式:head- 从⽂文本内容头部截取显示省略略号。例例如: "...efg"，middle - 在⽂文本内容中间截取显示省略略号。例如: "ab...yz"，tail - 从⽂文本内容尾 部截取显示省略略号。例例如: "abcd..."，clip - 不不显示省略略号，直接从尾部截断。
          numberOfLines={1} //配合ellipsizeMode设置⾏行行数
          onPress={...} //点击事件 selectable={true}//决定⽤用户是否可以⻓长按选择⽂文本，以便便复制和粘贴。
        >123
        </Text>

{/* 显示本地图 */}
<Image
  source={require('./img/favicon.png')}
/>

{/* 显示网络图 */}
<Image
    style={{width: 50, height: 50}}
    //网络和 base64 数据的图⽚需要⼿动指定尺⼨
  source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>

{/* 显示base64图 */}
<Image
style={{width: 66, height: 58}} //⽹网络和 base64 数据的图⽚片需要⼿手动指定尺⼨寸
source={{uri:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>

{/* 显示网络图 */}
<ImageBackground
    style={{width: 50%, height: 50%}}
    //网络和 base64 数据的图⽚需要⼿动指定尺⼨
  source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}>

  <Text>...</Text>
</ImageBackground>

<Button
  onPress={onPressLearnMore} //⽤户点击此按钮时所调用的处理理函数
  title="Learn More" //按钮内显示的⽂文本
  color="#841584" //文本的颜⾊(iOS)，或是按钮的背景⾊(Android)
  disabled={false} //按钮是否可以点击
  accessibilityLabel="Learn more about this purple button"
  //用于给残障人⼠显示的文本(比如读屏应⽤可能会读取这一内容)
/>

        <ActivityIndicator
          size="large" //指示器器的大⼩，默认为'small'[enum('small', 'large'), number]。⽬前只能在 Android 上设定具体的数值
          animating={true} //是否要显示指示器动画，默认为 true 表示显示，false 则隐藏。
          hidesWhenStopped={false} //在animating为 false 的时候，是否要隐藏指示器(默认为 true)。如果animating和hidesWhenStopped都为 false，则显示⼀一个静⽌止的指示器。
          color="#0000ff" />

<FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
/>

import React,{Component} from 'react';
import {View,Text,StyleSheet,Button,FlatList,RefreshControl} from 'react-native';

const listData=Array(20).fill(1).map((x,i)=>{
    return {
        key:i,
        value:`列表项${i+1}`
    }
});

export default class HotPage extends Component{
    static navigationOptions=({navigation})=>{
        return {
            headerTitle:navigation.getParam('title')
        }
    }

    constructor(props){
        super(props);
        this.state={
            listData,
            isLoading:false
        }
    }

    loadData(refresh){
        if(refresh){
            this.setState({
                isLoading:refresh
            });
        }


        setTimeout(()=>{
            let _listData=[];
            if(refresh){
                for(let i=this.state.listData.length-1;i>=0;i--){
                    _listData.push(this.state.listData[i])
                }
            }else{
                _listData=this.state.listData.concat(listData)
            }

            this.setState({
                listData:_listData,
                isLoading:false
            })
        },2000)
    }

    render(){

        return (
          <View style={styles.container}>
              <FlatList
                data={this.state.listData}
                renderItem={({item}) =>
                    <View style={{
                        justifyContent:'center',
                        alignItems:'center',
                        flex:1,
                        height:60,
                        backgroundColor:'#ccc'
                        }}>
                    <Text>{item.value}</Text>
                    </View>
                    }
                // 分割线：不会出现在第一行之前，也不会出现在第一行之后
                ItemSeparatorComponent={()=>{
                    return <View style={{height:2,backgroundColor:'#eee'}}/>
                }}
                // 列表为空时渲染组件
                ListEmptyComponent={()=>{
                    return <Text style={{textAlign:'center'}}>空空如也</Text>
                }}
                // 顶部组件
                // ListHeaderComponent={()=>{

                // }}
                // 尾部组件
                ListFooterComponent={()=>{
                    return <Text>我也是有底线的</Text>
                }}

                // 刷新相关：
                // 如果设置了此选项，则会在列表头部增加一个标准的RefreshControl控件，
                // 同时也需要正确设置refreshing属性
                refreshControl={
                    <RefreshControl
                      title='loading'
                      colors={['red']}
                      // 如果设置该属性为true，列表将出现一个正在加载的符号
                      refreshing={this.state.isLoading}
                      onRefresh={()=>{
                          this.loadData(true)
                      }}
                      tintColor={'orange'}
                    />
                }

                Threshold='0.4'
                // 当列表滚动到地步距离不足Threshold时调用
                onEndReached={()=>{
                    this.loadData();
                }}
              />
          </View>
        )

    }
}

const styles=StyleSheet.create({
    container:{
        flex:1,
        width:'100%',
        backgroundColor:'#f5f5f5'
    },
    text:{
        fontSize:26,
        marginBottom:20
    }
})