- 颜色值
https://reactnative.cn/docs/0.51/colors.html#content
- 盒模型
- 加边框
- 垂直关系
- 是否换行
- 主轴排列方式
- 次轴排列方式
- 学会使用界面调试器进行调试
三个Item平分布局
Item组件
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
Dimensions,
} from 'react-native';
const {width, height} = Dimensions.get('window');
const imageWidth = width / 3 - 10 * 2;
const imageHeight = imageWidth / 0.7;
type Props = {};
export default class Item extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Image
source={require('./src/img/poster.jpg')}
style={styles.image}
/>
<Text style={styles.text}>
金刚狼·殊死一战
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width:imageWidth,
flexDirection:'column'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
text:{
marginTop:5,
width:imageWidth,
fontSize:20,
fontWeight:'bold',
textAlign:'center'
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
image:{
width:imageWidth,
height:imageHeight,
},
});
- 主组件
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
} from 'react-native';
import Item from './Item';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Item/>
<Item/>
<Item/>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flexDirection:'row',
justifyContent:'space-between',
paddingHorizontal:15,
},
});
- 效果图