React Native 学习笔记六（关于宽高的设置）

继续在之前的例子上进行添加 尺寸

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中进行优化