React native (4)--props、state、style、布局

1.属性：props

render() { return( <Text>Hello {this.props.name}</Text> ); } 使用 <View style={{flex:1,flexDirection:'column'}}> <Greeting name="sinstar"/> <Greeting name="cos"/> </View>

2 状态 state

constructor(props) {
      super(props);
      this.state = {showText: true}

      //每1000毫秒对showText状态做一次取反操作
      setInterval(() => { this.setState({showText: !this.state.showText}); },1000); } render(){ let display = this.state.showText ? this.props.text : ' '; return( <Text>{display}</Text> ) } //使用 ----------------------------------- <BlinkTest text="aaa"/>

3.样式

export default class Greeting extends Component { render() { return( <Text style={styles.red}>Hello {this.props.name}</Text> // <View style={{width:300,height:200,backgroundColor:'red'}}></View> // <View style={{flex: 1,backgroundColor: 'powderblue'}} /> // <View style={{flex: 2,backgroundColor: 'skyblue'}} /> // <View style={{flex: 3,backgroundColor: 'steelblue'}} /> ); } } const styles=StyleSheet.create({ red:{ color:'red',fontSize:30 } }) 

下面是布局

1. flex 类似安卓的layout—weight

 flexDirection:'column':竖向 flexDirection:'row' ：横向 return ( <View style={{flex:1,flexDirection:'column'}}> <Greeting name="sinstar"/> <Greeting name="cos"/> <BlinkTest text="aaa"/> <View style={{width:300,backgroundColor:'red'}}></View> <View style={{flex: 1,backgroundColor: 'powderblue'}} /> <View style={{flex: 2,backgroundColor: 'skyblue'}} /> <View style={{flex: 3,backgroundColor: 'steelblue'}} /> </View> );

5.Justify Content

在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

// 尝试把`justifyContent`改为`center`看看 // 尝试把`flexDirection`改为`row`看看 <View style={{ flex: 1,flexDirection: 'column',justifyContent: 'space-between',}}> <View style={{width: 50,height: 50,backgroundColor: 'powderblue'}} /> <View style={{width: 50,backgroundColor: 'skyblue'}} /> <View style={{width: 50,backgroundColor: 'steelblue'}} /> </View>

Align Items

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 50去掉之后，alignItems: ‘stretch’才能生效。

// 尝试把`alignItems`改为`flex-start`看看 // 尝试把`justifyContent`改为`flex-end`看看 // 尝试把`flexDirection`改为`row`看看 <View style={{ flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'steelblue'}} /> </View> );