如何在react-native中使文本的某些部分可点击且某些部分具有不同的文本颜色

Question

我正在尝试使文本的某些部分具有不同颜色且可点击

这是我的代码：

<Text style = {styles.term_service}>By signing up, you agree to Terms of Service and Privacy Policy.</Text>

我想让服务条款和隐私政策可点击并具有不同的颜色。

Answer 1

您可以使用嵌套文本doc也

Text

接受

onPress

doc

<Text style = {styles.term_service}>By signing up, you agree to Terms of Service and <Text onPress={()=> someAction()} style = {{ color: '#fff' }}>Privacy Policy.</Text></Text>

Answer 2

只需在文本组件中传递 onPress 属性并使用箭头功能导航到条款和政策页面。

将它们中的每一个传递到不同的文本组件中，然后将样式设置为行样式。

<View 
style={styles.termsContainer}>
    <Text style = {styles.term_service}>By signing up, you agree to </Text>
    
    <Text  onPress={() => navigation.navigate("TermsAndConditions")}
    style={styles.terms_text}>Terms of Service and Privacy Policy.</Text>
    
    </View>

在视图的样式中 使 flexDirection:"row" 现在文本将彼此相邻

Answer 3

使用第三方库，如

react-native-hyperlink

有像

react-native-hyperlink

这样的第三方库提供了一种更方便的方法来处理元素内的可点击链接。

这是一个使用react-native-hyperlink的示例：

import Hyperlink from 'react-native-hyperlink';

const MyComponent = () => (
  <Hyperlink onPress={(url) => console.log('Clicked on URL:', url)} linkStyle={{ color: 'blue' }}>
    <Text>Click me to open a website: https://example.com</Text>
  </Hyperlink>
);