Reactnative 如何在 Text 中围绕 Text 包裹 TouchableOpacity

发布于05月16日

我正在try 执行下面这样的操作，这是Native不喜欢的.

我想用TouchableOpacity包装clickable个文本，并且有自己的风格.

通过将其包装在parent Text组件中，所有文本完美地并排放置.然而，我不能把TouchableOpacity放在Text个元件里面.

<View>
  <Text>
    <Text>Hello my name is</Text>
    <TouchableOpacity onPress={this.openProfile}>
      <Text style={styles.clickable}>{ name }</Text>
    </TouchableOpacity>
    <Text>, I am currently working at </Text>
    <TouchableOpacity onPress={this.openCompanyPage}>
      <Text style={styles.clickable}>{ company }</Text>
    </TouchableOpacity>
  </Text>
</View>

我得到的错误是:Views nested within a <Text> must have a width and height.我无法设置这些测量值，因为我希望它们是动态的，并且依赖于内容.

例如，name可能是约翰·史密斯或Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.

根据注释，我想用自定义样式呈现部分文本.我可以轻松做到这一点，只需放置Text within Text个.现在我想在文本的这些部分添加一个可点击的区域("Dan"、"Google").但我不能在文本元素中嵌入TouchableOpacity.

<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}> <Text>Hello my name is </Text> <TouchableOpacity> <Text style={{color: 'red'}}>Dan, </Text> </TouchableOpacity> <Text>I am currently working at </Text> <TouchableOpacity> <Text style={{color: 'red'}}>Google</Text> </TouchableOpacity> </View>

Reactnative 如何在 Text 中围绕 Text 包裹 TouchableOpacity

推荐答案

React-native相关问答推荐

try 使用JWT-DECODE解码令牌时出错

使用FETCH发送BLOB/文件时为空

@react-native-community/cli-platform-ios/native_modules' 来自哪里？

将值从一个 js 文件传递到 react native 中的另一个 js 文件：react native

错误发生意外错误：https：//registry.yarnpkg.com/react-native-template-react-native-template-typescript：未找到

如何获取 iOS 版本？

React Native 的 Firebase 初始错误(无法读取未定义的属性getItem)

ReactNative 0.43-rc.2 FlatList -- 试图获取超出范围索引 0 的框架

如何运行 React-Native 示例？

我们如何将 Firebase Analytics 与基于 expo 的 react-native 应用程序一起使用

Typescript：onPress 类型

Console.error：no permission handler detected

在 React Native App 中禁用屏幕捕获/ScreenShot

React Native - Firebase 身份验证持久性不起作用

React Native Bullet Character？ or Unicode？

在 React Native ScrollView 中检测滚动结束，对齐页面

如何在 React Native 中禁用图像淡入效果？

降级 react-native 的适当机制

如何允许 react-native 启用对 JSX(扩展)文件的支持

React Native 项目，有时使用 expo start 获得连接 ECONNREFUSED 127.0.0.1：19001