根据里面的组件扩展 <View>

Question

在我的 containerTop 中，我在 TripOptionsSelector 中呈现一个列表，该列表隐藏在最后。

我已尝试将 ma​​rginBottom/paddingBottom 添加到containerOptionsSelector，但没有任何区别。我不想给 my 添加高度，因为它会根据不同的手机而有所不同。

我还能如何简单地扩展视图以使文本不隐藏？

export const MapScreen: React.FunctionComponent = () => {
  return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
      <View style={styles.container}>
      <View style={styles.containerTop}>
          <BackArrow />
          <JourneyLocationsTextContainer />
          <View style={styles.containerOptionsSelector}>
            <TripOptionsSelector />
          </View>
        </View>
        <View style={styles.containerMap}>
          <MapContainer />
          <ButtonsContainer />
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeAreaViewContainer: { flex: 1 },
  container: {  flex: 1, backgroundColor: 'white'},
  containerTop: { flex: 1, backgroundColor: '#323443' },

  containerOptionsSelector: {
    marginTop: moderateScale(15),
    marginLeft: moderateScale(20),
  },
  containerMap: { 
    flex: 2
  },
});

export const TripOptionsSelector: React.FunctionComponent = () => {
  return (
    <View style={styles.offerContainer}>
      <Text style={styles.offerText}>Jetzt</Text>
      <Text style={styles.offerText}>1 Person</Text>
      <Text style={styles.offerText} >Filter</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  offerContainer: {
    flexDirection: 'row',
  },

Answer 1

您只需从 styles.containerTop 中删除 flex - 因此它的大小完全基于其内容。