Answers:
您可以<Text>
像容器一样使用其他文本组件。这是示例:
...
<Text>
<Text>This is a sentence</Text>
<Text style={{fontWeight: "bold"}}> with</Text>
<Text> one word in bold</Text>
</Text>
...
这是一个例子。
<Text style={{fontWeight: 'bold'}}> with</Text>
分成三行,则会丢失前导空格,因此您可能需要使用{' with'}
以确保始终拥有它。
styled-components
您可以通过大胆的话property
。
对于更像网络的感觉:
const B = (props) => <Text style={{fontWeight: 'bold'}}>{props.children}</Text>
<Text>I am in <B>bold</B> yo.</Text>
<Strong>
代替<B>
:)
const B = this.B
到render
您可以使用https://www.npmjs.com/package/react-native-parsed-text
import ParsedText from 'react-native-parsed-text';
class Example extends React.Component {
static displayName = 'Example';
handleUrlPress(url) {
LinkingIOS.openURL(url);
}
handlePhonePress(phone) {
AlertIOS.alert(`${phone} has been pressed!`);
}
handleNamePress(name) {
AlertIOS.alert(`Hello ${name}`);
}
handleEmailPress(email) {
AlertIOS.alert(`send email to ${email}`);
}
renderText(matchingString, matches) {
// matches => ["[@michel:5455345]", "@michel", "5455345"]
let pattern = /\[(@[^:]+):([^\]]+)\]/i;
let match = matchingString.match(pattern);
return `^^${match[1]}^^`;
}
render() {
return (
<View style={styles.container}>
<ParsedText
style={styles.text}
parse={
[
{type: 'url', style: styles.url, onPress: this.handleUrlPress},
{type: 'phone', style: styles.phone, onPress: this.handlePhonePress},
{type: 'email', style: styles.email, onPress: this.handleEmailPress},
{pattern: /Bob|David/, style: styles.name, onPress: this.handleNamePress},
{pattern: /\[(@[^:]+):([^\]]+)\]/i, style: styles.username, onPress: this.handleNamePress, renderText: this.renderText},
{pattern: /42/, style: styles.magicNumber},
{pattern: /#(\w+)/, style: styles.hashTag},
]
}
childrenProps={{allowFontScaling: false}}
>
Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too.
But you can also do more with this package, for example Bob will change style and David too. foo@gmail.com
And the magic number is 42!
#react #react-native
</ParsedText>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
url: {
color: 'red',
textDecorationLine: 'underline',
},
email: {
textDecorationLine: 'underline',
},
text: {
color: 'black',
fontSize: 15,
},
phone: {
color: 'blue',
textDecorationLine: 'underline',
},
name: {
color: 'red',
},
username: {
color: 'green',
fontWeight: 'bold'
},
magicNumber: {
fontSize: 42,
color: 'pink',
},
hashTag: {
fontStyle: 'italic',
},
});
使用此React本机库
安装
npm install react-native-htmlview --save
基本用法
import React from 'react';
import HTMLView from 'react-native-htmlview';
class App extends React.Component {
render() {
const htmlContent = 'This is a sentence <b>with</b> one word in bold';
return (
<HTMLView
value={htmlContent}
/> );
}
}
支持几乎所有的html标签。
对于更高级的用法,例如
查看此自述文件
我是react-native-spannable字符串的维护者
<Text/>
具有自定义样式的嵌套组件效果很好,但可维护性很低。
我建议您使用此库构建像这样的可扩展字符串。
SpannableBuilder.getInstance({ fontSize: 24 })
.append('Using ')
.appendItalic('Italic')
.append(' in Text')
.build()
现在无法嵌套文本组件,但是您可以将文本包装在如下视图中:
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
<Text>
{'Hello '}
</Text>
<Text style={{fontWeight: 'bold'}}>
{'this is a bold text '}
</Text>
<Text>
and this is not
</Text>
</View>
我使用了方括号内的字符串来强制单词之间的间隔,但您也可以使用marginRight或marginLeft来实现。希望能帮助到你。