Пользовательский цвет / содержание safeareaview нижнего отступа

Question

Я использую react-navigation в react-native app. react-navigation имеет предварительно встроенный SafeAreaView. Тем не менее, у меня есть очень специфический c дизайн для нижнего отступа SafeAreaView, как указано ниже:

1) Настройте цвет SafeAreaView, а именно мне нужно указать собственный отдельный цвет нижнего отступа в красная коробка. Заданный пользовательский отдельный цвет может / может не совпадать с цветом верхнего отступа, и он варьируется от одного экрана к другому. Поэтому мне нужно иметь возможность явно указать, что этому экрану нужен этот конкретный c цвет.

например: <SafeAreaView bottomPaddingColor={'green'}></SafeAreaView>

2) Индивидуальный дизайн контента (например: мне нужно 2 цвета). Одним из примеров является то, что нижний колонтитул на странице представляет собой кнопку с двумя разными цветами, разделенными на 50% ширины каждая. В дизайне необходимо, чтобы нижний отступ соответствовал цвету кнопки, как показано на рисунке.

Например: <SafeAreaView bottomPaddingColor={'green,red'}></SafeAreaView>, который автоматически разделяет цвет по ширине.

или в любом случае для настройки компонента bottomPadding, где я могу включить следующий компонент в качестве нижнего отступа.

<View style={{flexDirection: 'row', height: '100%'}}>
    <View style={{flex: 1, height: '100%', backgroundColor: 'red'}}></View>
    <View style={{flex: 1, height: '100%', backgroundColor: 'green'}}></View>
</View>

например:

Я прочитал документацию SafeAreaView предоставлено react-native и react-navigation, но не удалось найти такую ​​настройку.

Answer 1

Для этого вы можете отобразить несколько SafeAreaViews, следующее должно быть получено после:

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <SafeAreaView style={{ flex: 1 }}>
            <View style={{ flex: 1 }}>
              <Text>Content Goes here</Text>
            </View>
          </SafeAreaView>
        </View>
        <View style={{ flexDirection: 'row', flex: 0 }}>
          <SafeAreaView style={{ flex: 1, backgroundColor: 'red' }} />
          <SafeAreaView style={{ flex: 1, backgroundColor: 'green' }} />
        </View>
      </View>
    );
  }
}