web-dev-qa-db-fra.com

Comment inclure TouchableOpacity dans Text React Native

Salut, je veux envelopper TouchableOpacity dans un texte car je veux rendre une partie du texte cliquable. Lorsque j'enveloppe tout dans un texte, il semble parfait et c'est ainsi que je veux qu'il ressemble.

 <Text 
   style={{color: colors.black,
           fontSize: 12,
           fontWeight: 'normal',
           marginTop: 10,
           lineHeight: 18}}>
      {strings.loginPrivacyTermsCondOne} 
        <Text style={{color: colors.primaryColor,
                      fontSize: 12,
                      fontWeight: 'normal',}}>
          {strings.loginPrivacyTermsCondTwo}
        </Text>
          {strings.loginPrivacyTermsCondThree} 
        <Text style={{color: colors.primaryColor,
                      fontSize: 12,
                      fontWeight: 'normal'}}>
          {strings.loginPrivacyTermsCondFour}
        </Text>

          {/* <TouchableOpacity onPress={ this.termsOfService }>
            <Text style={{color: colors.primaryColor,
                          fontSize: 12,
                          fontWeight: 'normal',}}>
              {strings.loginPrivacyTermsCondFour}
            </Text>
          </TouchableOpacity> */}
      </Text>

Lorsque j'ajoute TouchableOpacity, cela ne fonctionne pas.

J'ai essayé de l'ajouter dans une vue, puis cela fonctionne bien et je suis capable d'ajouter TouchableOpacity mais du point de vue de l'interface utilisateur, ils ne sont pas alignés correctement.

Voici la capture d'écran montrant juste avec du texte où TouchableOpacity ne fonctionne pas et le deuxième bit est dans la vue où TouchableOpacity fonctionne mais ne semble pas correct.

enter image description here

Comment peut-il avoir l'air correct dès le premier bit. toutes suggestions très appréciées.

Merci R

reactjsreact-nativetextviewtouchableopacity
10
BRDroid

Vous pouvez imbriquer des éléments Text et affecter des gestionnaires onPress à chaque élément Text imbriqué que vous souhaitez rendre pressable (un lien).

Voir ci-dessous. Il y a un élément de texte externe et à l'intérieur un autre élément de texte, l'élément de texte enfant a un gestionnaire onPress, si vous exécutez cela, vous verrez "Mais c'est ça! exécute le gestionnaire onPress lorsque vous appuyez dessus, pas besoin d'un élément Touchable *.

<Text style={{color: '#000'}}> 
     This part is not clickable 
     <Text onPress={() =>
           {alert('but this is');}}
           style={{color: '#00F'}}>
     But this is!
     </Text> 
     but this isn't
</Text>

Vous pouvez créer un style à placer sur tous les éléments de texte qui ont le gestionnaire/a onPress, pour leur donner une couleur différente, comme dans votre exemple d'image.

Notez que cela ressemble beaucoup au HTML, où vous imbriqueriez des balises d'ancrage à l'intérieur d'un élément p, par exemple;

<p>
    This part is not clickable 
    <a href="https://google.com"> but this is</a>
    but this isn't
</p>

Dans votre exemple, ce serait quelque chose comme ceci (non testé):

<Text style={{color: colors.black,
              fontSize: 12,
              fontWeight: 'normal', 
              marginTop: 10,
              lineHeight: 18}}>
        {strings.loginPrivacyTermsCondOne} 
        <Text style={{color: colors.primaryColor,
                      fontSize: 12,
                      fontWeight: 'normal',}}>
          {strings.loginPrivacyTermsCondTwo}
        </Text>
          {strings.loginPrivacyTermsCondThree} 
        <Text style={{color: colors.primaryColor, 
                      fontSize: 12,
                      fontWeight: 'normal'}}>
          {strings.loginPrivacyTermsCondFour}
        </Text>

          <Text onPress={ this.termsOfService } 
                style={{color: colors.primaryColor,
                        fontSize: 12, 
                        fontWeight: 'normal'}}>
              {strings.loginPrivacyTermsCondFour}
          </Text> 
      </Text>

En réponse à votre commentaire, voici un exemple de modification de la couleur après avoir cliqué sur le lien.

En bref, j'ai ajouté un champ booléen sur l'état, une fois le texte appuyé, je mets à jour cette variable d'état pour qu'elle soit vraie, la valeur de style de l'élément de texte a alors un opérateur ternaire, qui décide de la couleur dans laquelle le texte doit être rendu, dans mon exemple, il apparaîtra comme 'colours.primaryColor' s'il n'a pas encore été pressé, et 'rouge' une fois qu'il a été cliqué.

class Foo extends Component {

    constructor (props) {
        super(props);

        this.state = {
            privacyClicked: false //Track if they have clicked privacy
        };
    }

    render () {

        return (
             <Text onPress={ () =>{
    this.setState({
        privacyClicked: true
    });
}} style={{color: (this.state.privacyClicked ? colors.primaryColor : 'red'), 
           fontSize: 12,
           fontWeight: 'normal'}}>
    {strings.loginPrivacyTermsCondFour}
</Text> 
        );
    }
}

PS, le formatage sur l'exemple de texte n'est pas génial.

11
Lee Brindley