API جدید SafeAreaView در React Native


در نسخه 0.50.1 تیم توسعه دهنده React Native یک API جدی برای راحتی طراحی لایه برای iPhone X معرفی کردند(SafeAreaView).با استفاده از SafeAreaView شما به راحتی و بدون دردسر زیاد میتونید codebase خودتون رو برای iPhone X بروزرسانی و یکپارچه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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' } }) |
شما کافیه که فقط یک رنگ پس زمینه با flex مشخص کنید که در مثال بالا رنگ پس زمینه gray است.سپس کافیه که کامپوننت سطح بالا UI رو درون SafeAreaView قرار بدید تا برنامه به خوبی کارکنه.
همونطور که در اسکرین شات بالا میبینید،این API با React Navigation یکپارچه شده است.اگر نمیتوانید پروژه React Native خودتون رو بروزرسانی کنید،نسخه JS بصورت یک ماژوال npm در دسترس استreact-native-safe-area-view.
اگر قصد دارید بیشتر در مورد این API بدونید،میتونید این مقاله رو بخونید.
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
گاهی اوقات هنگام توسعه برنامهها با React Native، در موقعیتی...
آموزش آرایه در جاوا اسکریپت ( JavaScript)
گاهی اوقات نیاز دازیم تا اطلاعاتی را ذخیره کنیم و...
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
Flipper یک ابزار debugging توسعه داده شده توسط فیسبوک است...
نمایش PDF در react native
pdf یکی از پرکاربردترین و محبوب ترین فرمت های document...
ایجاد Timeline ListView در React Native
کامپوننت Timeline ListView در React Native یکی از محبوب ترین...
آموزش React Navigation 5
react navigation اخیرا نسخه جدید خود یعنی x.5 همراه با...
دیدگاهتان را بنویسید