Question

我想以一些文本显示链接并显示如下输出。

所以我完成了下面的代码。

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

但是它显示如下输出。

然后，在我使用以下代码后，它可以满足我的输出要求，但是在单击时未设置突出显示效果。

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

如何通过触摸突出显示效果获得所需的输出？

Answer 1

使用react-native-styled-text

该库处理几乎所有内容

Answer 2

创建自定义组件后问题已解决

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>

Answer 3

对我来说它正在工作

<Text style={{ marginVertical: 20, }}>Your personal data will be used to process your order, support your experience
        throughout this app and other purposes describe in
        <Text style={{ color: 'blue' }}
              onPress={() => { /*your on press event here */ }}
            > privacy policy</Text>
        </Text>

对具有触摸效果的单个文本中的多个文本反应本机内联样式

3 个答案: