按钮不会在屏幕中心对齐

Question

我正在尝试将我的按钮对齐到中心，但我拥有它的方式不会这样做。我在我的容器中将它们设置为“中心”，并且我还为样式表中的每个属性都这样做了。有人知道它可能是什么吗？

这是我在渲染中的设置：

<View style={styles.container}>
 <ImageBackground
          source={{
            uri:
              "https://backgrounddownload.com/wp-content/uploads/2018/09/simpsons-clouds-background-5.jpg"
          }}
          style={{ width: "100%", height: "100%" }}
        >
     <TouchableOpacity
       onPress={() => this.props.navigation.navigate("HomerSimpson")}
       style={styles.button}>
         <Text style={styles.text}>Homer Simpson</Text>
     </TouchableOpacity>

     <TouchableOpacity
        onPress={() => this.props.navigation.navigate("Home")}
         style={styles.button} >
        <Text style={styles.text}>Home Screen</Text>
     </TouchableOpacity>


</ImageBackground>
</View>

这就是我设置样式表的方式：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    alignContent: "center"
  },
  text: {
    fontSize: 25,
    fontWeight: "bold",
    color: "#f6c945",
    alignItems: "center",
    justifyContent: "center",
    alignContent: "center",
  },
  button: {
    flexDirection: "row",
    backgroundColor: "#2d98da",
    alignItems: "center",
    justifyContent: "center",
    alignContent: "center",
    marginTop: 10,
    marginBottom: 10,
    borderRadius: 10,
    borderWidth: 1.0,
    borderColor: "black",
    height: 30,
    width: 260
  }
});

Answer 1

好吧，你忘了把对齐属性放在ImageBackground上

这里是博览会link