继续在之前的例子上进行添加 尺寸
1.使用固定的尺寸 设置View容器 和设置自定义的组组件 如果父组件的空间不足 自控件的会出现重叠的情况
示例:
import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class Blank extends Component{ //初始化state(从ES6开始 在construct中进行初始化 ES5中使用getInitinalState进行初始化 不过会逐渐被淘汰) constructor(props){ super(props); //初始化状态为显示文本 同时定义showText 后面根据showText修改state的值 this.state={showText:true}; //每隔200ms进行取反 隐藏文本操作 //lambda表达式 表示对于一个方法的某个参数的具体实现 也可以用来便利map集合等等 setInterval(()=>{ this.setState({showText:!this.state.showText}); },200); } render(){ let display=this.state.showText?this.props.text:' '; return( //根据当前的showText的值 决定时候显示text的内容 <Text style={styles.red}>{display}</Text> ); } } class helloReact1 extends Component { //渲染 render() { return ( //设置显示风格 自定义View 显示结果为Hellohello HelloWorld <View style={{width:220,height:440 ,backgroundColor:'yellow'}}> <Blank text='I want you'/> <Blank text='I want you1111'/> <Blank text='I want you2222'/> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, red: { fontSize: 20, textAlign: 'right', margin: 10, color:'#ff0000', width:100, height:100, backgroundColor:'#00ff00' }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); //调用方法 完成渲染(应用注册后才能正确的渲染) //将赠个应用作为整体进行注册 而不是每个模块都需要注册(第一个参数是应用的名字 第二个参数 是class(模块)的名字) AppRegistry.registerComponent('helloReact', () => helloReact1);2.弹性宽高(flex)flex就像android中linear layout中的weight(权重)时一样的 如果大小值相同 则平分空间 否则谁大 谁占据的空间就大
注意:组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width
和height
,也没有设定flex
,则父容器的尺寸为零。其子组件如果使用了flex
,也是无法显示的。
red: { fontSize: 20, textAlign: 'right', margin: 10, color:'#ff0000', width:100, //height:100, backgroundColor:'#00ff00', flex:1 },试着在
<Blank text='I want you'/>中添加属性flex但是没有起作用 原因未知
加载顺序是从上到下 所有加载完了 在执行注册模块的render方法 可以在import中进行优化