zoukankan      html  css  js  c++  java
  • [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility

    In this lesson, you will learn how to use the SafeAreaView component to avoid the sensor cluster (the notch) and home activity indicator on the iPhone X.

    SafeAreaView is similar to the View, just for iphone X, the screen is different from previous version. Using SafeAreaView can ensure all the content will be visible

    import React from 'react';
    import {
      View,
      Text,
      StyleSheet,
      SafeAreaView,
    } from 'react-native';
    
    const App = () => (
      <View style={styles.container}>
        <SafeAreaView style={styles.nav}>
          <Text style={styles.text}>Nav bar</Text>
        </SafeAreaView>
        <SafeAreaView style={styles.content}>
          <Text style={styles.textLight}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae diam consectetur nunc sollicitudin feugiat a sollicitudin velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus a dignissim orci. In commodo, velit ac hendrerit laoreet, mauris sapien mollis nulla, at convallis orci diam eu purus. Cras pharetra turpis ac massa laoreet, at consequat lorem pharetra. Pellentesque ac leo ut dui congue eleifend sed sed erat. Nunc at iaculis elit. Duis congue, odio sit amet rutrum imperdiet, quam arcu gravida leo, eu dapibus risus ex et ante. Fusce pellentesque interdum neque, a sodales lacus consequat id. Nunc faucibus lobortis blandit. Proin porttitor commodo pellentesque.
          </Text>
        </SafeAreaView>
        <SafeAreaView style={styles.tab}>
          <Text style={styles.text}>Tab bar</Text>
        </SafeAreaView>
      </View>
    );
  • 相关阅读:
    TP框架模板中IF Else 如何使用?
    Append 后如何使用 fadein淡入效果
    ThinkPad如何修改fn键默认操作
    TP框架ajax U方法不解析怎么办?
    thinkphp session如何取数组
    FTP服务搭建
    Linux系统学习之字符处理
    如何使用zabbix初级监控
    项目同步部署
    巡检常用命令
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8272590.html
Copyright © 2011-2022 走看看