css - 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 };

标签： cssreact-nativestylesheettouchableopacityreact-native-stylesheet

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