Реагирование на собственный встроенный стиль для нескольких текстов в одном тексте с эффектом касания - PullRequest
Новая
       34

Реагирование на собственный встроенный стиль для нескольких текстов в одном тексте с эффектом касания

0 голосов
/ 14 июня 2019

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

enter image description here

Итак, я сделал следующий код. 

<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
    <Text>This is non clockable text </Text>
    <TouchableOpacity><Text style={{fontWeight:'bold'}}>this is clickable text link for fire onPress</Text></TouchableOpacity>
    <Text> again</Text>
    <Text> non clickable text</Text>
</View>

но он отображает вывод, как показано ниже.

enter image description here

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

<Text>
    <Text>This is non clockable text </Text>
    <Text style={{fontWeight:'bold'}} onPress={()=>{alert('alert')}}>this is clickable text link for fire onPress</Text>
    <Text> again</Text>
    <Text> non clickable text</Text>
</Text>

как получить желаемый результат с эффектом подсветки касания?

Ответы [ 2 ]

0 голосов
/ 15 июня 2019

Проблема решена после создания пользовательского компонента

LinkText.js 

import React, {Component} from 'react';
import {Text} from 'react-native';
class LinkText extends Component {
    state = {
        opacity:1.0,
        isOnPressFire:false,
    }

    render() {
        return (
            <Text
                style={{fontWeight:'bold', color:this.state.opacity==1.0?"#000000FF":"#00000088", opacity:this.state.opacity}}
                suppressHighlighting={true}
                onResponderGrant={()=>{
                    this.setState({opacity:0.5,isOnPressFire:true});
                }}
                onResponderRelease={()=>{
                    setTimeout(()=>{
                        this.setState({opacity:1.0,isOnPressFire:false});
                    }, 350);
                }}
                onResponderTerminate={()=>{
                    this.setState({opacity:1.0,isOnPressFire:false});
                }}
                onPress={()=>{
                    if(this.state.isOnPressFire) {
                        alert('Working Ok');
                    }
                    this.setState({opacity:1.0,isOnPressFire:false});
                }}>
                {this.props.data}
            </Text>
        )
    }
}
export default LinkText;

Использование: - 

<Text>
    <Text>This is non clockable text </Text>
    <LinkText data={"this is clickable text link for fire onPress"}/>
    <Text> again</Text>
    <Text> non clickable text</Text>
    <LinkText data={"again Clickable text"}/>
</Text>
0 голосов
/ 14 июня 2019

Использовать реагировать-родной стиль текста

эта библиотека обрабатывает почти все

...