视图中的中心元素-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",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",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>
    );
  }
}

它给出了这个：

样式：

backgroundImage: {
    flex: 1,width: "100%",height: "100%",margin: 0,padding: 0,},autocompleteCoords: {
    width: 320,height: 55,alignItems: 'center',justifyContent: 'center',fontFamily: "FunctionLH",borderWidth: 0,borderBottomWidth: 1,borderColor: "#FFF",CoordsContainer: {
    position: "relative",zIndex: 1,paddingHorizontal: 8,autocompletePicker: {
    backgroundColor: "#FFF",zIndex: 10,left: 0,...Platform.select({
      ios: {
        left: 20
      }
    })
  },autocompleteScroll: {
    backgroundColor: "#FFF",borderWidth: 1,touchable2: {
    width: "50%",alignItems: "center",justifyContent: "center",

当我像@yoel的建议那样更改imageBckground样式时：

backgroundImage: {
  justifyContent:center,alignItems: center,flex: 1,

我得到：

解决方法

添加到backgroundImage样式

backgroundImage: {
  justifyContent:"center",alignItems: "center",flex: 1,width: "100%",height: "100%",margin: 0,padding: 0,},

,

您需要将以下内容添加到CSS / in-line样式中的任何应该位于中间的组件中。建议您阅读有关Flexbox的更多信息。

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