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:‘路径’,可以是本地路径也可以是远程路径
原文链接:https://www.f2er.com/react/303381.html