在反应本机中将按钮样式设置为内联文本答案

【问题标题】：Style Button as inline text in react-native在反应本机中将按钮样式设置为内联文本
【发布时间】：2023-02-23 20:12:30
【问题描述】：

我有以下代码使用来自react-native-paper 的Text 和Button 组件：

<Text>See also </Text>
<Button mode="text" compact onPress={this.nav( name )}>Compass</Button>
<Text> on how to use the Compass.</Text>

呈现时会导致：

如果我将 Button 替换为 TouchableOpacity 或类似的结果，结果如下所示：

如何设置 Button 或 TouchableOpacity 的样式，使其不会相对于周围的文本偏移？

更新

使用来自@RajendranNadar 的示例并在修复后使其在 android 上运行：

See also <Pressable onPress={() => alert('Hello :)')}><Text style={styles.text}>Compass</Text></Pressable> on how to use the Compass.

结果是

【问题讨论】：

您是否已经考虑过避免使用 <Button> 并使用带有 onPress 道具的 <Text> （正确设置样式）？
可按压元件是您的最佳选择
@Milore 我从那开始。问题是，<Text onPress={blah()}>link</Text> 很难命中，只有字母是活动的，而不是它们之间或周围的空间
@injecteer 如果您是从 React Native 导入的，您是否使用任何 UI 库进行排版？
@RajendranNadar 我正在使用react-native-paper

标签： css react-native button

【解决方案1】：

实现此目的的一种方法是使用嵌套文本。是这样的：

const NestedText = () => {
  return (
    <Text>See also <Text style={styles.link} onPress={() => {}}>Compass</Text> on how to use the Compass.</Text>
  );
};

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

【讨论】：

这样只有字母是活跃的，而不是它的周围环境。例如字母 O 在里面是不可点击的
这种方式在使用基础 React Native 文本组件时效果很好 - 请参阅以下内容：snack.expo.dev/VkcDzMzmv。您遇到的问题可能是 React Native Paper 的人为因素。
@Abe 请将您的评论与零食中的代码放在一起，这样我就可以接受它作为答案。我测试了它，它很有魅力！
很高兴它起作用了！我可以，但这与我们正在评论的答案不一样吗？

【解决方案2】：

这是使用 react-native 包中的 Pressable 组件的最佳方法

<Text>
  See also <Pressable onPress={() => alert('Hello')}>Compass</Pressable> on how to use the Compass.
</Text>

在此处查看现场演示 https://snack.expo.dev/@raajnadar/pressable-example

Pressable component docs

【讨论】：

在 android 上，它抱怨说文本必须在 Text 组件内呈现。如果我将 <Text> 放在 <Pressable> 中，我会得到与原始样本相同的垂直偏移
用您的示例更新了问题
@injecteer 这个答案有效，只需从 <Pressable> 中的 <Text> 中删除您的样式。这工作正常<Text style={styles.paragraph}> See also <Pressable style={styles.text} onPress={() => alert('Hello :)')}> <Text>Compass</Text> </Pressable> on how to use the Compass. </Text>

【解决方案3】：

这是完整的工作示例。

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

const PrivacyPolicy = ({title = 'GET STARTED'}) => {
  const openUrl = async () => {
    let url = 'https://facebook.com';
    await Linking.canOpenURL(url)
      .then(() => Linking.openURL(url))
      .catch(err => {
        console.log(err);
      });
  };
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        By Pressing The "{title}" You Accept
        <TouchableWithoutFeedback onPress={() => openUrl()}>
          <Text style={styles.text2}> Privacy Policy </Text>
        </TouchableWithoutFeedback>
        And
        <TouchableWithoutFeedback onPress={() => openUrl()}>
          <Text style={{...styles.text2}}> End User License Agreement</Text>
        </TouchableWithoutFeedback>
      </Text>
    </View>
  );
};

export default PrivacyPolicy;

const styles = StyleSheet.create({
  container: {
    width: SCREEN_WIDTH - moderateScale(20),
    alignSelf: 'center',
    marginTop: moderateScale(10),
  },
  text: {
   
    includeFontPadding: false,
    fontSize: moderateScale(12),
  },
  text2: {
   
    fontSize: moderateScale(12),
    includeFontPadding: false,
  },
});

【讨论】：

这样文本就很难点击了，见上面的 cmets