Текст поверх, а не под изображением в реагировать родной - PullRequest
Новая
       14

Текст поверх, а не под изображением в реагировать родной

0 голосов
/ 07 февраля 2020

Я использовал изображение, чтобы сделать кнопку с 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"
      },

1 Ответ

2 голосов
/ 07 февраля 2020

Простое решение этой проблемы с использованием zIndex, просто добавьте zIndex: 1 к вашему стилю просмотра 

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