改变全模态的颜色

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,

  },

});

Answer 1

添加flex: 1到容器样式