javascript - 改变全模态的颜色

Question

我正在使用反应原生模式。我正在尝试使用 backgroundColor 来填充整个模态。但是，颜色仅应用于顶部。为什么会这样？

如何解决此问题并将颜色应用于整个模态视图？

return (
    <Modal visible={isUserVisible}>
      <View style={styles.container}>
      {/* <View> */}
        <View>
          <TouchableOpacity
            style={styles.cross}
            onPress={() => setIsUserVisible(false)}>
            <Thumbnail
              source={{
                uri:
                  'https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png',
              }}></Thumbnail>
          </TouchableOpacity>
          <Text>HELLOO</Text>
        </View>
        <View style={styles.searchLocationContainer}>
          <UserInfoContainer
            firstName={firstName}</UserInfoContainer>
        </View>
      </View>
    </Modal>

export const styles = StyleSheet.create({
  container: {
    backgroundColor: '#323443',
    //backgroundColor: 'red',
  },
  button: {
    paddingTop: 0,
  },
  text: {
    color: 'black',
  },
  cross: {
    paddingTop: 50,
    paddingLeft: 40,
  },
  searchLocationContainer: {
    flex: 1,
  },
});

标签： javascriptcsstypescriptreact-nativereact-native-modal

Answer 1

添加flex: 1到容器样式