Phản hồi màu nền SafeAreaView gốc - Cách gán hai màu nền khác nhau cho đầu và cuối màn hình?

Question

Tôi đang sử dụng SafeAreaView từ React Native 0.50.1 và nó hoạt động khá tốt ngoại trừ một phần. Tôi đã gán màu nền cam cho SafrAreaView nhưng không thể tìm ra để thay đổi nền vùng không an toàn dưới cùng thành màu đen.

Đây là mã và tôi đã bao gồm kết quả mong đợi và kết quả thực tế. Cách tốt nhất để làm cho phần dưới cùng của màn hình màu đen thay vì màu da cam là gì?

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' 
 
    } 
 
})

Tôi muốn có đầu màu cam và phía dưới màu đen.

Nhưng dưới đây là những gì tôi có được bây giờ.

Answer 1

tôi đã có thể giải quyết điều này bằng cách sử dụng một số vị trí tuyệt đối hack. Xem các tinh chỉnh sau. Không phải bằng chứng trong tương lai bằng bất kỳ phương tiện nào, nhưng nó giải quyết được vấn đề tôi có.

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

• lẽ hữu ích, tôi đã cố gắng giải pháp cho truy vấn này nhưng dưới cách tiếp cận là phù hợp nhất trong trường hợp của tôi.

• Một vài chế độ xem/vùng chứa có hình nền.

• Trong trường hợp của tôi, tôi quyết định sử dụng kích thước của màn hình iPhone x.

• Ứng dụng này chỉ được thiết kế cho chế độ dọc.

• Đã phát hiện thiết bị & cho iPhone X vừa điều chỉnh các phần tử & phía dưới hàng đầu.

• Cách tiếp cận này giúp duy trì các ứng dụng sử dụng theme & của hoàn chỉnh một màn hình của 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); 
  
      }