[英]How can I insert a line break into a <Text> component in React Native?
[英]Unbreakable Line in React Native Using Text Component
是否可以在代碼中解決這個問題? 我希望文本170km/h
始終保持在同一行。
我嘗試在 html 頁面中重現該問題,但此問題不存在,只是為了反應。 看:
p { background-color: #0000FF; color: #FFFFFF; padding: 20px } p.first { width: 181px; } p.second { width: 180px; }
<p class='first'> I want that the text 170km/h stay always in the same line. </p> <p class='second'> I want that the text 170km/h stay always in the same line. </p>
現在我的 React 代碼! 你可以在這里看到: https : //snack.expo.io/ryaIT4ExQ
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Hi! I'm a text and I'm inside a Text Component and I want that 170km/h stay always in the same line. How what I need do to make this?
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
paragraph: {
backgroundColor: "red",
margin: 24,
fontSize: 18,
fontWeight: 'bold',
color: '#ffffff',
},
});
我會把170km/h
放在一個跨度內並給它white-space: nowrap
I want that the text <span style="white-space: nowrap">170km/h</span> stay always in the same line.
只需為文本樣式 flexWrap 添加道具:'wrap',
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.