改变全模态的颜色

Question

我正在使用 React Native 模式。我正在尝试使用 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,
  },
});

Answer 1

容器样式添加flex: 1

改变全模态的颜色

change color of full Modal

javascript

css

typescript

react-native

react-native-modal