API جدید SafeAreaView در React Native

در نسخه 0.50.1 تیم توسعه دهنده React Native یک API جدی برای راحتی طراحی لایه برای iPhone X معرفی کردند(SafeAreaView).با استفاده از SafeAreaView شما به راحتی و بدون دردسر زیاد میتونید codebase خودتون رو برای iPhone X بروزرسانی و یکپارچه کنید.

import {
  ...
  SafeAreaView
} from 'react-native';

class Main extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <App />
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  ...,
  safeArea: {
    flex: 1,

  backgroundColor: '#ddd'
  }
})

import {

...

SafeAreaView

} from 'react-native';

class Main extends React.Component {

render() {

return (

<App />

</SafeAreaView>

)

}

const styles = StyleSheet.create({

...,

safeArea: {

flex: 1,

backgroundColor: '#ddd'

}

})

شما کافیه که فقط یک رنگ پس زمینه با flex مشخص کنید که در مثال بالا رنگ پس زمینه gray است.سپس کافیه که کامپوننت سطح بالا UI رو درون SafeAreaView قرار بدید تا برنامه به خوبی کارکنه.

همونطور که در اسکرین شات بالا میبینید،این API با React Navigation یکپارچه شده است.اگر نمیتوانید پروژه React Native خودتون رو بروزرسانی کنید،نسخه JS بصورت یک ماژوال npm در دسترس استreact-native-safe-area-view.

اگر قصد دارید بیشتر در مورد این API بدونید،میتونید این مقاله رو بخونید.