react-native 中的文字在图像上方而不是图像下方

Question

我用一张图片制作了一个带有 touchableOpacity 的按钮。我把一些文字放在上面有一个类似按钮的图像。没关系，这很有效，很酷！我的问题是我希望文字是白色的，确实如此，但我认为文字在图像下方。您看不到图像上的白色文字。

不知道是我文字位置问题还是样式问题...

你能帮我一下，或者给我任何线索吗？谢谢！

注册和登录按钮的示例代码：

  <ImageBackground
        source={require("../../assets/images/background.jpg")}
        style={styles.backgroundImage}
      >
        <Header
          centerComponent={{
            text: i18n.t("welcome.title"),
            style: {
              height: 60,
              fontFamily: "FunctionLH",
              fontSize: 30,
              color: "#fff"
            }
          }}
          containerStyle={{
            marginTop: 0,
            backgroundColor: "#6C6363",
            borderBottomColor: "transparent"
          }}
          statusBarProps={{ barStyle: "light-content" }}
        />
        <View style={styles.container}>
          {this.state.signedIn ? (
            <LoggedInPage
              name={this.state.name}
              photoUrl={this.state.photoUrl}
            />
          ) : (
            <LoginPage signIn={this.signIn} />
          )}
          <Button
            onPress={logIn}
            containerStyle={[styles.mybtnContainer, styles.btnContainerFb]}
            contentStyle={styles.buttonAccueil}
          >
            FACEBOOK
          </Button>
          <TouchableOpacity
            style={styles.touchable}
            onPress={() => this.props.navigation.navigate("Login")}
          >
            <View style={styles.view}>
              <Text style={styles.textimg}>
                {i18n.t("welcome.action.login").toUpperCase()}
              </Text>
            </View>
            <Image
              source={require("../../assets/images/btn-background.png")}
              style={styles.tripsimg}
            />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.touchable}
            onPress={() => this.props.navigation.navigate("Signup")}
          >
            <View style={styles.view}>
              <Text style={styles.textimg}>
                {i18n.t("welcome.action.signup").toUpperCase()}
              </Text>
            </View>
            <Image
              source={require("../../assets/images/btn-background.png")}
              style={styles.tripsimg}
            />
          </TouchableOpacity>
        </View>
      </ImageBackground>

样式：

container: {
    flex: 1,
    backgroundColor: "transparent",
    alignItems: "center",
    justifyContent: "center",
    width: "100%"
  },
    textimg: {
      fontFamily: "FunctionLH",
      color: "#FFF",
      fontSize: 24
    },
      tripsimg :{
        height: 50,
        width: 300,
        position: "relative", // because it's parent
        top: 2,
        left: 2,
        marginVertical: 5
      },
    touchable: {
        opacity: 0.6,
        alignItems: "center",
        justifyContent: "center"
      },
    view: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "transparent"
      },

Answer 1

一个简单的解决方案是使用 zIndex，只需将 zIndex: 1 添加到您的视图样式

view: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "transparent",
    zIndex: 1
  }

react-native 中的文字在图像上方而不是图像下方

Text over and not under image in react-native

text

position

image

react-native