react-native - 视图中的中心元素 - React-Native

Question

我正在尝试拥有一个屏幕，其组件位于中心。通常它很简单，但我不明白为什么我不能使这些组件居中......我试图将视图包含在一般视图中，但它根本不起作用。你能给我一点帮助吗？我知道通常做起来很简单，但在这里我被卡住了，我不明白为什么......非常感谢！

我的代码是：

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>
    );
  }
}

它给出了这个：

风格：

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,
    width: "100%",
    paddingHorizontal: 8,
  },
autocompletePicker: {
    backgroundColor: "#FFF",
    borderWidth: 0,
    zIndex: 10,
    width: "100%",
    left: 0,
    ...Platform.select({
      ios: {
        left: 20
      }
    })
  },
  autocompleteScroll: {
    backgroundColor: "#FFF",
    borderWidth: 1,
    borderColor: "#FFF",
  },
  touchable2: {
    width: "50%",
    alignItems: "center",
    justifyContent: "center",
  },

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

backgroundImage: {
  justifyContent:center,
  alignItems: center,

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

我得到：

标签： react-nativeviewstylescenter

Answer 1

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

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