高度样式不起作用&想要更改状态栏的背景颜色

Question

我是使用 React Native 和 Expo 进行应用程序开发的新手。

我一直在制作像下面附加的第一张图片这样的屏幕。

状态栏正下方有一个

Material Top Tab

，下面的灰色按钮是选项卡屏幕的组件。

外部 View 标签具有

flex: 1

样式，可以用白色背景填充屏幕。

ScrollView

标签里有一个

View

标签，我把它的高度设置为60。但是，它被拉伸到一定高度，如下图第一张图所示。

如果我从

flex:1

标签中删除

View

样式，高度样式可以正常工作，但屏幕底部的背景颜色变为灰色而不是白色。

我应该如何设计它们以使其像第二张图片一样？ 以下是该组件的代码。

const BoatListScreen = ({ navigation, route }) => {
  const { region } = route.params;
  const [selectedRegion, setSelectedRegion] = useState(
    RegionAreaNames[region][0]
  );
  const [data, setData] = useState(DUMMY_DATA);

  useEffect(() => {
    if (region) {
      setData(DUMMY_DATA.filter((item) => item.region === selectedRegion));
    }
  }, [region, selectedRegion]);

  return (
    <View style={{ backgroundColor: WHITE }}>
      {region && (
        <ScrollView
          horizontal
          style={styles.areaTagContainer}
          showsHorizontalScrollIndicator={false}
        >
          {RegionAreaNames[region].map((area, index) => (
            <Pressable
              key={index}
              style={[
                styles.areaButton,
                {
                  backgroundColor:
                    selectedRegion === area ? PRIMARY.DARK : GRAY.LIGHT,
                },
              ]}
              onPress={() => setSelectedRegion(area)}
            >
              <Text
                style={[
                  {
                    color: selectedRegion === area ? WHITE : BLACK,
                    fontWeight: selectedRegion === area ? 'bold' : 'normal',
                  },
                ]}
              >
                {area}
              </Text>
            </Pressable>
          ))}
        </ScrollView>
      )}

      <FlatList
        data={data}
        renderItem={({ item }) => (
          <Pressable>
            <BoatCard item={item} />
          </Pressable>
        )}
        keyExtractor={(item) => item.id}
        style={{ padding: 20 }}
        contentContainerStyle={{
          flexGrow: 1,
          paddingBottom: 100,
        }}
      />
    </View>
  );
};

BoatListScreen.propTypes = {
  navigation: PropTypes.object,
  route: PropTypes.object,
};

const styles = StyleSheet.create({
  areaTagContainer: {
    height: 60,
    flexDirection: 'row',
    marginTop: 5,
    paddingVertical: 10,
    paddingHorizontal: 20,
  },
  areaButton: {
    backgroundColor: GRAY.LIGHT,
    paddingVertical: 10,
    paddingHorizontal: 25,
    borderRadius: 20,
    marginRight: 10,
    justifyContent: 'center',
  },
});

另外，我想将状态栏的背景颜色（

expo-status-bar

）设置为白色..我尝试过

backgroundColor

选项，但似乎它只适用于Android。如何在 iOS 上更改背景颜色？

Answer 1

你可以尝试用额外的View包装你的ScrollView吗？在某些情况下，滚动组件会因为实现而尝试增加其样式。