Question

我有以下代码：

  return (
    <KeyboardAvoidingView
      keyboardVerticalOffset={100}
      style={{ backgroundColor: '#000' }}
    >
      <ScrollView
        style={{ backgroundColor: '#000' }}
      >
        <View>{renderedPreviousMessage}</View>
        <View style={{ paddingBottom: 50 }}>
          <Input />
      </ScrollView>
    </KeyboardAvoidingView>
  )

但这会呈现白色背景的黑色部分：

如何使整个背景变黑？

编辑

这是整个组件。当我添加flex: 1时，它使整个屏幕变白了，一切都消失了。

return !message || !renderedPreviousMessage ? null : (
    <KeyboardAvoidingView
      // style={{ flex: 1, flexDirection: "column", justifyContent: "center" }}
      behavior="padding"
      enabled
      keyboardVerticalOffset={100}
      style={[
        cosmetic.darkModeEnabled && { backgroundColor: DARK_COLOR }
        // { flex: 1 }
      ]}
    >
      <ScrollView
        // style={cosmetic.darkModeEnabled && { backgroundColor: DARK_COLOR }}
        keyboardShouldPersistTaps="handled"
      >
        <View
          style={cosmetic.darkModeEnabled && { backgroundColor: DARK_COLOR }}
        >
          {renderedPreviousMessage}
        </View>
        <View
          style={[
            { paddingBottom: 50 },
            cosmetic.darkModeEnabled && { backgroundColor: DARK_COLOR }
          ]}
        >
          <Input
            inputStyle={cosmetic.darkModeEnabled && styles.dark_mode_text}
            labelStyle={cosmetic.darkModeEnabled && styles.dark_mode_text}
            multiline
            label="reply"
            value={replyText}
            rightIcon={
              <View style={{ flexDirection: "row" }}>
                <View style={{ flexDirection: "column" }}>
                  {showEmojis && (
                    <Icon
                      name="md-close"
                      type="ionicon"
                      color={cosmetic.darkModeEnabled ? WHITE : BLUE_HUE}
                      iconStyle={{
                        // paddingLeft: 20,
                        paddingRight: 20
                        // paddingTop: 10
                      }}
                      onPress={() => {
                        setShowEmojis(false);
                      }}
                    />
                  )}
                </View>
                <View style={{ flexDirection: "column" }}>
                  <Icon
                    name="md-send"
                    type="ionicon"
                    color={cosmetic.darkModeEnabled ? WHITE : BLUE_HUE}
                    iconStyle={
                      {
                        // paddingLeft: 20,
                        // paddingRight: 20,
                        // paddingTop: 10
                      }
                    }
                    onPress={() => {
                      if (validateLength(replyText) === 0) {
                        setReplyTooShort(true);

                        return;
                      }
                      handleSendReply(replyText);
                      setReplyText("");
                    }}
                  />
                </View>
              </View>
            }
            autoCorrect={true}
            errorMessage={replyTooShort ? "reply too short" : ""}
            onChangeText={e => {
              if (replyTooShort) {
                setReplyTooShort(false);
              }

              setReplyText(e);
            }}
          />
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

Answer 1

您可以为组件style={{ flex:1, backgroundColor: '#000' }}添加KeyboardAvoidingView

Answer 2

请检查一下。将flex：1添加到KeyboardAvoidingView会占用整个屏幕，因为flex是1。因此颜色将应用于整个屏幕。世博会小吃工作链接Expo snack

由于不存在组件，因此添加了自定义嘿消息。

Answer 3

我通过实现Component来解决此问题，该实现是在另一个Component的另一个View中，我必须更改其背景的颜色。这样就可以了。

如何改变整个本机背景？

3 个答案: