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

Question

我正在构建条款和条件文本，我希望我的条款和条件具有

TouchableOpacity

行为，同样适用于隐私政策

如下所示：

现在我想将

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 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>

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

或者您可以使用 Text 组件的 onPress，您可以使用它来代替 TouchableOpacity，并且也可以让您更轻松地设置样式

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