如何在react-native中的文本之后放置按钮？答案

【问题标题】：How to put button just after text in react-native?如何在react-native中的文本之后放置按钮？
【发布时间】：2021-06-23 07:21:15
【问题描述】：

如何在 react-native 中的文本之后放置按钮，如下图所示？

【问题讨论】：

标签： react-native stylesheet

【解决方案1】：

您可以在 Text 组件中使用 onPress 属性。并使用嵌套的Text

你可以在这里试试：https://snack.expo.io/@vasylnahuliak/9a76b0

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
  const handleLinkPress = () => {
    alert('link pressed')
  }

  return (
    <View style={styles.container}>
      <Text>
        Short descriptopm for trainer: Lorem ipsum dolor sit amet, consectetur
        adipiscing elit, sed do eiusmod tempor incididunt ut labore.
        <Text style={styles.link} onPress={handleLinkPress}> edit </Text>
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  link: {
    color: 'blue',
    fontWeight: 'bold',
  },
});

export default App;

【讨论】：

【解决方案2】：

例如，您可以使用<TouchableOpacity></TouchableOpacity>。您只需将<Text>-Tag 包裹在其中即可。

<TouchableOpacity> <Text> edit </Text> </TouchableOpacity>

TouchableOpacity 具有类似于按钮的 OnPress 事件。

https://reactnative.dev/docs/touchableopacity

【讨论】：

你能在snack.expo.io上写例子吗？我猜这个选择不起作用，因为在这种情况下TouchableOpacity 将在文本下。

【解决方案3】：

你可以试试https://www.npmjs.com/package/react-native-render-html#making-your-custom-component-block-or-inline

将编辑按钮设为 href 链接，您可以在 onLinkPress 属性上获取其 onPress

【讨论】：

在这种情况下使用 html 解析器是开销