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