React native 在视图中居中图元-反应本机

我正在试着制作一个屏幕，它的组件在中间。通常这很简单，但我不明白为什么我不能使这个组件居中。。。 我试图将视图包含在一个总体视图中，但根本不起作用。你能帮我一点忙吗？ 我知道加班通常很简单，但我被困在这里我不明白为什么。。。 非常感谢

我的代码是：

export default class Coords extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <ImageBackground
        source={require("../../assets/images/background.jpg")}
        style={styles.backgroundImage}
      >
        <Header
          backgroundImage={require("../../assets/images/bg-header.png")}
          centerComponent={{
            text: i18n.t("settings.title"),
            style: styles.headerComponentStyle
          }}
          containerStyle={styles.headerContainerStyle}
          statusBarProps={{ barStyle: "light-content" }}
        />
          <View>
            <Text>{"\n"}</Text>
            <Text>{"\n"}</Text>
            <Autocomplete
              key={shortid.generate()}
              containerStyle={styles.CoordsContainer}
              inputStyle={styles.autocompleteCoords}
              placeholder={i18n.t("subscription.input.country") + "..."}
              placeholderColor="#FFF"
              spinnerColor="#9D794F"
              highLightColor="#9D794F"
              rightContentItemStyle={{ color: "#333" }}
              scrollToInput={(ev) => {}}
              handleSelectItem={(item, id) =>
                this.handleSelectItemAutocomplete("departure", item, id)
              }
              onDropdownClose={() => onDropdownClose()}
              onDropdownShow={() => onDropdownShow()}
              pickerStyle={styles.autocompletePicker}
              scrollStyle={styles.autocompleteScroll}
              fetchData={async (searchTerm) => {
                return await this.fetchAirportsDataAutocomplete(
                  "departure",
                  searchTerm
                );
              }}
              initialValue={0}
              minimumCharactersCount={2}
              highlightText
              valueExtractor={(item) => item.name}
              rightContent
              rightTextExtractor={(item) => item.props}
            />
          </View>
            <Text>{"\n"}</Text>
          <View>
          <Autocomplete
            key={shortid.generate()}
            containerStyle={styles.CoordsContainer}
            inputStyle={styles.autocompleteCoords}
            placeholder={i18n.t("subscription.input.city") + "..."}
            placeholderColor="#FFF"
            spinnerColor="#9D794F"
            highLightColor="#9D794F"
            rightContentItemStyle={{ color: "#333" }}
            scrollToInput={(ev) => {}}
            handleSelectItem={(item, id) =>
              this.handleSelectItemAutocomplete("departure", item, id)
            }
            onDropdownClose={() => onDropdownClose()}
            onDropdownShow={() => onDropdownShow()}
            pickerStyle={styles.autocompletePicker}
            scrollStyle={styles.autocompleteScroll}
            fetchData={async (searchTerm) => {
              return await this.fetchAirportsDataAutocomplete(
                "departure",
                searchTerm
              );
            }}
            initialValue={0}
            minimumCharactersCount={2}
            highlightText
            valueExtractor={(item) => item.name}
            rightContent
            rightTextExtractor={(item) => item.props}
          />
        </View>
          <Text>{"\n"}</Text>
        <View>
        <Autocomplete
          key={shortid.generate()}
          containerStyle={styles.CoordsContainer}
          inputStyle={styles.autocompleteCoords}
          placeholder={i18n.t("subscription.input.postalcode") + "..."}
          placeholderColor="#FFF"
          spinnerColor="#9D794F"
          highLightColor="#9D794F"
          rightContentItemStyle={{ color: "#333" }}
          scrollToInput={(ev) => {}}
          handleSelectItem={(item, id) =>
            this.handleSelectItemAutocomplete("departure", item, id)
          }
          onDropdownClose={() => onDropdownClose()}
          onDropdownShow={() => onDropdownShow()}
          pickerStyle={styles.autocompletePicker}
          scrollStyle={styles.autocompleteScroll}
          fetchData={async (searchTerm) => {
            return await this.fetchAirportsDataAutocomplete(
              "departure",
              searchTerm
            );
          }}
          initialValue={0}
          minimumCharactersCount={2}
          highlightText
          valueExtractor={(item) => item.name}
          rightContent
          rightTextExtractor={(item) => item.props}
        />
      </View>
        <Text>{"\n"}</Text>
          <Text>{"\n"}</Text>
      <TouchableOpacity
        style={styles.touchable2}
        onPress={() => this.props.navigation.navigate("Settings")}
      >
        <View style={styles.view2}>
          <Text style={styles.textimg2}>
            {i18n.t("signup.action.back")}
          </Text>
        </View>
        <Image
          source={require("../../assets/images/btn-background.png")}
          style={styles.tripsimg2}
        />
      </TouchableOpacity>
  </ImageBackground>
    );
  }
}

当我像这样更改imageBckground样式时，请遵循@yoel的建议：

backgroundImage: {
  justifyContent:center,
  alignItems: center,

    flex: 1,
    width: "100%",
    height: "100%",
    margin: 0,
    padding: 0,
 },

---

我明白了：

您需要将以下内容添加到CSS/内嵌样式中，添加到应该位于中间的组件中。建议您阅读更多关于

---

将添加到背景图像样式

backgroundImage: {
  justifyContent:"center",
  alignItems: "center",

    flex: 1,
    width: "100%",
    height: "100%",
    margin: 0,
    padding: 0,
 },

---

你的风格代码在哪里？我编辑了，添加了风格。好的，请看我的回答我在imageBackground中用这个代码编辑了我的文章，它居中，但我刚刚得到第一个“输入”谢谢你的回答，我尝试“玩”那些风格，但每次都不是我想要的

  display: flex;
  justify-content:center;
  align-items: center;

backgroundImage: {
  justifyContent:"center",
  alignItems: "center",

    flex: 1,
    width: "100%",
    height: "100%",
    margin: 0,
    padding: 0,
 },