React-Native基础_4.View组件

View组件 对应ios 的UIView android 中的view
使用要先导入View
import {
    View
} from 'react-native';
使用就是View标签，可以添加Style样式，View 可以嵌套View和其他组件
 
文本组件
Text 的使用需要View 组件去包装一下
 <View style={[styles.item ,styles.itemOne]}>
    <Text style={styles.itemText}>1</Text>
 </View>
 Text 组件可以嵌套Text
 <Text> <Text>aaa</Text>bbb </Text>
 
 自定义文本组件
 声明
 class ComText extends React.Component{
    render(){
        return(
            <Text style ={styles.itemText}>
                {this.props.children}
            </Text>
        );
    }
}
使用：  <ComText>ComText</ComText>
 
图像组件 Image
 <Image  style = {styles.image}
                    source ={{uri:'http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=32c015eaf6039245b5b8e94ceffdceb7/d788d43f8794a4c28c10040c04f41bd5ad6e39e2.jpg'}}/>
    指定source uri 图片路径可以是本地 也可以是网络
 
	背景图片，background  将图片flex:1  当作背景，然后嵌套组件
	/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
'use strict'
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    View
} from 'react-native';
//import {AppRegistry,} from 'react-native';
//import Day0718 from './componets/Home'
 
export default class Day0718 extends Component {
 
    render() {
        return (
            <View style={styles.Container}>
                <Image  style = {styles.backImage}
                        source ={{uri:'http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=32c015eaf6039245b5b8e94ceffdceb7/d788d43f8794a4c28c10040c04f41bd5ad6e39e2.jpg'}}>
 
                 <View style={styles.overlay}>
                     <Text style={styles.overlayHeader}> 小美女，你瞅啥呢</Text>
                     <Text style={styles.overlaySubHeader}> 小美女</Text>
                 </View>
                </Image>
 
            </View>
        );
    }
}
const styles = StyleSheet.create({
    overlay:{
        backgroundColor:'rgba(0,0,0,0.3)',
        alignItems:'center'
    },
    overlayHeader:{
        fontSize:33,
        fontFamily:'Helvetica Neue',
        fontWeight:'200',
        color:'#eae7ff',
        padding:10
    },
    overlaySubHeader:{
        fontSize:16,
        fontFamily:'Helvetica Neue',
        fontWeight:'200',
        color:'#eae7ff',
        padding:10,
        paddingTop:0,
    },
    backImage:{
       // alignItems:'center',
        flex:1,
        //justifyContent:'center',
        resizeMode:'cover',
    },
    image:{
 
        height:200,
        width:100,
        justifyContent:'center',
    },
    item:{
        backgroundColor:'#fff',
        borderWidth:1,
        borderColor:'#6435c9',
        margin:6,
        flex:1,
    },
    itemOne:{
      //  alignSelf:'flex-start',
    },
    itemTwo:{
        //alignSelf:'center',
    },
    itemThree:{
        flex:2,
    },
    itemText:{
        fontSize:33,
        fontFamily:'Helvetica Neue',
        fontWeight:'200',
        color:'#6435c9',
        padding:30,
    },
    Container: {
 
        //alignItems:'flex-start',// flex-start 靠在左边显示 center 居中 flex-end 尾部
        //
        flexDirection:'column',//row column 方向
        backgroundColor: '#eae7ff',
        flex: 1,
        //justifyContent:'center',//center ; 居中  flex-end 位于底部  space-between/space-around屏幕平均分配
    },
    Text: {
        color: '#6435c9',
        fontSize: 26,
        textAlign: 'center',
        fontStyle: 'italic',
        letterSpacing: 2,
        lineHeight: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '300',
        textDecorationLine: 'underline',
        textDecorationStyle: 'dashed',
    },
 
});
 
class ComText extends React.Component{
    render(){
        return(
            <Text style ={styles.itemText}>
                {this.props.children}
            </Text>
        );
    }
}
 
AppRegistry.registerComponent('Day0718', () => Day0718);

注 ：View组件（对应Android 中原生的View ,ios 中原生的UIView）

文本视图<Text>

图片视图<Image>

视图组件可以嵌套, 图片指定source uri:‘路径’，可以是本地路径也可以是远程路径