3.3 Size & Dimensions & onLayout

1.window size

1. let winSize = Dimensions.get('window');
2. console.log(winSize);
3. class Size extends Component {
4. render() {
5. return (
6. <View style={styles.container}>
7. <View style={styles.block}/>
8. <Text style={styles.text}>some text</Text>
9. </View>
10. );
11. }
12. }
13. const styles = StyleSheet.create({
14. container: {
15. flex: 1,
16. alignItems: 'flex-start'
17. },
18. block: {
19. height: 100,
20. width: winSize.width,
21. backgroundColor: 'red'
22. },
23. text: {
24. color: '#ffffff',
25. fontSize: 40/winSize.scale,
26. backgroundColor: 'blue'
27. }
28. });

2.onLayout

1. class Size extends Component {
2. handleTextLayout(evt){
3. console.log(evt.nativeEvent.layout);
4. }
5. render() {
6. return (
7. <View style={styles.container}>
8. <View style={styles.block}/>
9. <Text style={styles.text}
10. onLayout={this.handleTextLayout}>some text</Text>
11. </View>
12. );
13. }
14. }

原文: https://unbug.gitbooks.io/react-native-training/content/33size&dimensions&_onlayout.html