3.3 Size & Dimensions & onLayout

1.window size

3.3 Size & Dimensions & onLayout - 图1

  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