为什么我的图像使我的按钮总是在它的顶部？反应本机

Question

我正在做一个小项目，这是我的问题：使用此代码：

   <View style={{ flex: 3, backgroundColor: "brown" }}>
        <View
          style={[
            styles.container,
            {
              flexDirection: "row",
              justifyContent: "center",
              backgroundColor: "yellow",
              flex: 1,
              zIndex: 1,
            },
          ]}
        >
          <View style={{ flex: 0.15, backgroundColor: "blue" }}></View>
          <View
            style={{ flex: 2, backgroundColor: "pink", flexDirection: "col" }}
          >
            <View style={{ flex: 0.55, backgroundColor: "blue" }}></View>
            <TouchableOpacity>
              <View style={styles.button11}>
                <Text style={styles.text3}>Découvrir</Text>
              </View>
            </TouchableOpacity>
          </View>
          <View style={{ flex: 0.25, backgroundColor: "blue" }}></View>
          <View style={{ flex: 2, backgroundColor: "violet" }}>
            <TouchableOpacity>
              <View style={styles.button11}>
                <Text style={styles.text3}>Nos Servives</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
        {/*
        <Image
          source={img_back}
          style={{
            width: "100%",
            height: 500,
          }}
        />
        */}
      </View>

我的按钮靠近蓝色外壳的中心。然而，如果我删除 {/* ... */} 并因此添加我的图像，按钮总是在图像的顶部（在图像内部，但按钮的顶部触摸图像的顶部）。我该怎么做才能使按钮位于其他地方？我的问题出在两个按钮上。非常感谢你 response/comments.

样式是：

  container: {
    justifyContent: "center",
    marginTop: 12,
  },
button11: {
    backgroundColor: "#26AA90",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 3,
    height: 45,
    padding: 15,
    width: 165,
  },
text3: {
    fontSize: 17,
    textAlign: "center",
    fontWeight: 400,
    color: "#FFFFFF",
    width: 100,
  },

Answer 1

您需要为每个 TouchableOpacity 使用 ImageBackground（注意：您可以将背景颜色设置为透明以便看到您的图像）

为什么我的图像使我的按钮总是在它的顶部？反应本机

Why is my image making it so that my button is always at the top part of it? React native

view

flexbox

reactjs

react-native

touchableopacity