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.3)',alignItems:'center'
    },overlayHeader:{
        fontSize:33,fontFamily:'Helvetica Neue',fontWeight:'200',color:'#eae7ff',padding:10
    },overlaySubHeader:{
        fontSize:16,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,itemOne:{
      //  alignSelf:'flex-start',itemTwo:{
        //alignSelf:'center',itemThree:{
        flex:2,itemText:{
        fontSize:33,color:'#6435c9',padding:30,Container: {

        //alignItems:'flex-start',// flex-start 靠在左边显示 center 居中 flex-end 尾部
        //
        flexDirection:'column',//row column 方向
        backgroundColor: '#eae7ff',flex: 1,//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:‘路径’，可以是本地路径也可以是远程路径
React-Native基础_4.View组件

猜你在找的React相关文章
