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

来源：互联网发布：类似毛骗的烧脑网络剧编辑：程序博客网时间：2024/04/29 20:22

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    }})

下面是布局

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,height:200,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, height: 50, backgroundColor: 'skyblue'}} />        <View style={{width: 50, height: 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,        flexDirection: 'column',        justifyContent: 'center',        alignItems: 'center',      }}>        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />      </View>    );

0 0