React Native 常用语法、Flexbox布局

快来打我* 2023-07-14 05:56 4阅读 0赞

>  *  使用 react JSX 语法
>  *  使用 react-native StyleSheet 设置样式（驼峰写法）
>  *  使用 react-native Dimensions 获取设备宽、高、分辨率
>  *  使用 react-native Platform 获取设置操作系统

// App.js
    import React from 'react';
    import { 
      SafeAreaView,
      StyleSheet,
      Dimensions,
      Platform,
      View,
      Text,
      StatusBar,
    } from 'react-native';
    
    const App: () => React$Node = () => { 
      return (
        <>
          <StatusBar barStyle="dark-content" />
          <SafeAreaView style={ styles.safeAReaViewStyle}>
            <View style={ styles.boxViewStyle}>
              <View style={ { width: 40, height: 110, backgroundColor: 'green'}}>
                <Text>视图1</Text>
              </View>
              <View style={ { width: 60, height: 120, backgroundColor: 'purple'}}>
                <Text>视图2</Text>
              </View>
              <View style={ { width: 70, height: 150, backgroundColor: 'cyan'}}>
                <Text>视图3</Text>
              </View>
              <View style={ { width: 80, height: 170, backgroundColor: 'orange'}}>
                <Text>视图4</Text>
              </View>
            </View>
            <View style={ styles.dimensionsViewStyle}>
              <Text>当前屏幕的宽度：{ Dimensions.get('window').width}</Text>
              <Text>当前屏幕的高度：{ Dimensions.get('window').height}</Text>
              <Text>当前屏幕的分辨率：{ Dimensions.get('window').scale}</Text>
              <Text>当前运行平台：{ Platform.OS}</Text>
            </View>
          </SafeAreaView>
        </>
      );
    };
    
    const styles = StyleSheet.create({ 
      safeAReaViewStyle: { 
        flex: 1,
        backgroundColor: 'red',
      },
      boxViewStyle: { 
        flexDirection: 'row',
        justifyContent: 'space-evenly',
      },
      dimensionsViewStyle: { 
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
    });
    
    export default App;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: /images/20230529/80752b995871426abc908cad9837aec5.png