React Native如何将组件包装到Text中的TouchableOpacity

Question

我正在构建条款和条件文本，我希望我的条款和条件具有TouchableOpacity行为，PrivacyPolicy也是如此

如下所示：

现在我想将 TouchableOpacity 行为添加到 条款和条件 与 隐私政策 相同，但是当我包装 条款和条件 和隐私政策 到TouchableOpacity 它开始变成如下所示：

即使您使用的是flexWrap: 'wrap'，条款和条件也已移至新行，并且仍有空间。

下面是我的完整代码：

const styles = StyleSheet.create({
  termNConWrapper: {
    ...marginHelper(normalize(4), 0, normalize(5), 0).margin,
    width: wp('80%'),
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  termNconAgreement: {
    ...fontHelper(
      10,
      typographyFonts.openSansRegular,
      typographyColors.description,
      0.07,
      16,
    ).font,
    // textAlign: 'center',
  },
  termNcon: fontHelper(
    10,
    typographyFonts.openSansRegular,
    colors.primary,
    0.1,
    16,
  ).font,
});

const OnboardTermsNCondition = () => (
  <View style={styles.termNConWrapper}>
    <Text style={styles.termNconAgreement}>
      By clicking Sign Up, you acknowledge that you have read and agree to the
    </Text>
    <TouchableOpacity activeOpacity={0.4}>
      <Text style={styles.termNcon}>{' Terms & Conditions '}</Text>
    </TouchableOpacity>
    <Text style={styles.termNconAgreement}>and</Text>
    <TouchableOpacity activeOpacity={0.4}>
      <Text style={styles.termNcon}> Privacy Policy</Text>
    </TouchableOpacity>
    {/* <Text style={styles.termNconAgreement}>
      By clicking Sign Up, you acknowledge that you have read and agree to the
      <Text style={styles.termNcon}>{' Terms & Conditions '}</Text>
      and
      <Text style={styles.termNcon}> Privacy Policy</Text>
    </Text> */}
  </View>
);

如果有人可以提供帮助，我们将不胜感激。谢谢

编辑：我尝试删除辅助样式，但仍然没有运气。下面是完整的代码：

import React, { memo } from 'react';
// import {  } from 'native-base';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { fontHelper, marginHelper } from 'constants/theme/helpers';
import { typographyFonts, colors, typographyColors } from 'constants/theme';
import { normalize } from 'utils/normalize';
import { widthPercentageToDP as wp } from 'react-native-responsive-screen';

const styles = StyleSheet.create({
  termNConWrapper: {
    // ...marginHelper(normalize(4), 0, normalize(5), 0).margin,
    // width: wp('80%'),
    // flexDirection: 'row',
    // flexWrap: 'wrap',
  },
  termNconAgreement: {
    // ...fontHelper(
    //   10,
    //   typographyFonts.openSansRegular,
    //   typographyColors.description,
    //   0.07,
    //   16,
    // ).font,
    // textAlign: 'center',
  },
  termNcon: {},
});

const OnboardAgreement = () => (
  <View style={styles.termNConWrapper}>
    <Text style={styles.termNconAgreement}>
      By clicking Sign Up, you acknowledge that you have read and agree to the
      <TouchableOpacity activeOpacity={0.4}>
        <Text style={styles.termNcon}>{' Terms & Conditions '}</Text>
      </TouchableOpacity>
      and
      <TouchableOpacity activeOpacity={0.4}>
        <Text style={styles.termNcon}> Privacy Policy</Text>
      </TouchableOpacity>
    </Text>
  </View>
);

const MemoizedOnboardAgreement = memo(OnboardAgreement);

export { MemoizedOnboardAgreement as OnboardAgreement };

Answer 1

最简单的解决方案是将所有内容放在一个文本组件中。

代码：

   <Text style={styles.termNconAgreement}>
      By clicking Sign Up, you acknowledge that you have read and agree to the
      <TouchableOpacity activeOpacity={0.4}>
        <Text style={styles.termNcon}>{' Terms & Conditions '}</Text>
      </TouchableOpacity>
      and
      <TouchableOpacity activeOpacity={0.4}>
        <Text style={styles.termNcon}> Privacy Policy</Text>
      </TouchableOpacity>
    </Text>

输出：

演示：

https://snack.expo.io/HD8NeugqV

Answer 2

您可以使用 Text 作为包装器而不是视图

  <Text style={styles.termNConWrapper}>
    <Text style={styles.termNconAgreement}>
      By clicking Sign Up, you acknowledge that you have read and agree to the
    </Text>
    <TouchableOpacity activeOpacity={0.4}>
      <Text style={styles.termNcon}>{' Terms & Conditions '}</Text>
    </TouchableOpacity>
    <Text style={styles.termNconAgreement}>and</Text>
    <TouchableOpacity activeOpacity={0.4}>
      <Text style={styles.termNcon}> Privacy Policy</Text>
    </TouchableOpacity>
    {/* <Text style={styles.termNconAgreement}>
      By clicking Sign Up, you acknowledge that you have read and agree to the
      <Text style={styles.termNcon}>{' Terms & Conditions '}</Text>
      and
      <Text style={styles.termNcon}> Privacy Policy</Text>
    </Text> */}
  </Text>

无法检查样式，因为您有样式助手，但它应该可以工作。

或者您可以使用 onPress of Text 组件代替 TouchableOpacity，这样您也可以更轻松地设置样式

 <Text onPress={()=>{alert(123)}} style={styles.termNcon}> Privacy Policy</Text>