React Native SafeAreaView kolor tła - Jak przypisać dwa różne kolory tła dla górnej i dolnej części ekranu?

Question

Używam SafeAreaView z React Native 0.50.1 i działa całkiem dobrze, z wyjątkiem jednej części. Ja przypisałem pomarańczowy kolor tła do SafrAreaView, ale nie mogę wymyślić, aby zmienić dolne tło obszaru niepewnego na czarny.

Oto kod i uwzględniłem oczekiwany wynik i rzeczywisty wynik. Jaki jest najlepszy sposób, aby dolna część ekranu była czarna zamiast pomarańczowa?

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: '#FF5236' 
 
    } 
 
})

chcę mieć pomarańczowy top i czarne dno.

Ale poniżej jest to, co mam teraz.

Answer 1

udało mi się rozwiązać za pomocą pewnego położenia bezwzględnego włamanie. Zobacz następujące ulepszenia. Nie jest to dowód przyszłości, ale rozwiązuje problem, który miałem.

import { 
 
    ... 
 
    SafeAreaView, 
 
    View 
 
} from 'react-native'; 
 
class Main extends React.Component { 
 
    render() { 
 
    return (
 
     <SafeAreaView style={styles.safeArea}> 
 
     <App /> 
 
     <View style={styles.fixBackground} /> 
 
     </SafeAreaView> 
 
    ) 
 
    } 
 
} 
 
const styles = StyleSheet.create({ 
 
    ..., 
 
    safeArea: { 
 
    flex: 1, 
 
    backgroundColor: '#FF5236' 
 
    }, 
 
    fixBackground: { 
 
    backgroundColor: 'orange', 
 
    position: 'absolute', 
 
    bottom: 0, 
 
    right: 0, 
 
    left: 0, 
 
    height: 100, 
 
    zIndex: -1000, 
 
    } 
 
})

Answer 2

• Może pomocny, próbowałem rozwiązanie dla tego zapytania, ale poniżej podejścia był najlepiej pasuje w moim przypadku.

• Kilka widoków/pojemników miało obraz tła.

• W moim przypadku zdecydowałem się wykorzystać rozmiar ekranu iPhone'a x.

• Aplikacja została zaprojektowana tylko w trybie portretu.

• Wykryto urządzenie & dla iPhone'a X, po prostu dostosowałem górne elementy & na dole .

• Takie podejście przyczyniło się do utrzymania aplikacji motyw & wykorzystanie pełnego ekranu iPhone X.

  isIPhoneX =() => { 
       const X_HEIGHT = 812, X_WIDTH = 375; 
       const {"height": D_HEIGHT, "width": D_WIDTH} = Dimensions.get("window"); 
  
       return Platform.OS === "ios" && 
        (D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH || 
        D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT); 
  
      }