Как включить TouchableOpacity в текстовый ReactNative - PullRequest
Новая
       38

Как включить TouchableOpacity в текстовый ReactNative

0 голосов
/ 04 сентября 2018

Привет! Я хочу обернуть TouchableOpacity в текст, так как я хочу сделать часть текста кликабельной. Когда я оборачиваю все в текст, это выглядит идеально, и я хочу, чтобы это выглядело. 

 <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>

Когда я добавляю TouchableOpacity, он не работает.

Я попытался добавить его в представление, затем оно работает нормально, и я могу добавить TouchableOpacity, но с точки зрения пользовательского интерфейса они не выровнены должным образом.

Вот скриншот, показывающий только текст, где TouchableOpacity не работает, а второй бит находится в представлении, где TouchableOpacity работает, но не выглядит правильно.

enter image description here

Как сделать так, чтобы это выглядело как первый бит? любые предложения высоко ценится.

Спасибо R

1 Ответ

0 голосов
/ 04 сентября 2018

Вы можете вкладывать текстовые элементы и назначать обработчики onPress для каждого вложенного текстового элемента, который вы хотите сделать нажимаемым (ссылка).

Смотри ниже. Есть внешний текстовый элемент, а внутри другой текстовый элемент, дочерний текстовый элемент имеет обработчик onPress, если вы запустите это, вы увидите «Но это так!» выполняет обработчик onPress при нажатии, нет необходимости в элементе 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>

Вы можете создать стиль для размещения любых элементов Text, имеющих обработчик / a onPress, чтобы сделать их другого цвета, как в вашем примере изображения.

Обратите внимание, это очень похоже на HTML, где вы бы вложили теги привязки в элемент p, например; 

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

В вашем примере это будет что-то вроде этого (не проверено): 

<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>

В ответ на ваш комментарий приведем пример изменения цвета после нажатия на ссылку.

Короче говоря, я добавил булево поле для состояния, как только текст нажимается, я обновляю эту переменную состояния на true, тогда значение стиля текстового элемента имеет троичный оператор, который решает, какой цвет отображать текст в моем примере он будет отображаться как 'colors.primaryColor', если он еще не был нажат, и как 'красный' после нажатия. 

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, форматирование на примере текста не очень хорошее.

...