在React-native中,如何创建多行文本?

rsl1atfo  于 2023-04-07  发布在  React
关注(0)|答案(4)|浏览(156)

我有这样的东西

<View>
  <Text>By clicking this I accept </Text>
  <TouchableHighlight>
    <Text>Terms and Conditions, </Text>
  </TouchableHighlight>
  <TouchableHighlight>
    <Text>Privacy Policy</Text>
  </TouchableHighlight>
</View>

看起来是这样的

By clicking this I accept 
Terms and Conditions
Privacy Policy

或者如果我把它放在一排,它看起来像这样(|显示屏幕的边界)

|                                        |          
| By clicking this I accept Terms and Con|ditions, Privacy Policy
|                                        |

我想让它看起来

|                                       | 
| By clicking this I accept Terms and   |
| Conditions, Privacy Policy            |

我的意思是,如果一个单词不适合在屏幕上,它被放在下一行。就像一个多行文本,但有多个文本和触摸突出显示。这甚至可能吗?

kpbwa7wx

kpbwa7wx1#

试试这个

<Text>
    <Text>By clicking this I accept </Text>
    <Text onPress={() => console.log('terms pressed')} style={{color: 'red'}}>Terms and Conditions</Text>
    <Text>,</Text>
    <Text onPress={() => console.log('privacy pressed')} style={{color: 'red'}}>Privacy Policy</Text>
</Text>

只需将console.log替换为您希望处理单击的任何函数的引用。

dohp0rv5

dohp0rv52#

你可以设置它的样式:

flexWrap: 'wrap',
flexDirection: 'row',
cgh8pdjw

cgh8pdjw3#

const { width, height } = Dimensions.get("window");
<View style={{width:width}}>
//your code
</View>
ewm0tg9j

ewm0tg9j4#

<View style={styles.termsContainer}>
                                <Text style={styles.term_service}>By signing up you accepted our </Text>
                                <Text onPress={() => navigation.navigate("TermsAndConditions")}
                                    style={styles.terms_text}>Terms of Service </Text>
                                <Text style={styles.term_service}>and </Text>
                                <Text onPress={() => navigation.navigate("TermsAndConditions")}
                                    style={styles.terms_text}>Privacy Policy </Text>
                            </View>

termsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginLeft: Dimens.margin_normal,
    marginRight: Dimens.margin_normal
},
term_service: {
    color: Colors.black
},
terms_text: {
    color: Colors.primary
}

相关问题