反應本機文字離開我的屏幕，拒絕包裝。該怎麼辦？

下面的代碼可以在this live example 反應本機文字離開我的屏幕，拒絕包裝。該怎麼辦？

我有以下發現反應本土元素：

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
} = React; 

var SampleApp = React.createClass({ 
    render: function() { 
    return  (
    <View style={styles.container}> 

     <View style={styles.descriptionContainerVer}> 
      <View style={styles.descriptionContainerHor}> 
      <Text style={styles.descriptionText} numberOfLines={5} > 
       Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..! 
      </Text> 
      </View> 
     </View> 

     <View style={styles.descriptionContainerVer2}> 
      <View style={styles.descriptionContainerHor}> 
      <Text style={styles.descriptionText} numberOfLines={5} >Some other long text which you can still do nothing about.. Off the screen we go then.</Text> 
      </View> 
     </View> 



    </View>); 
    } 
}); 
AppRegistry.registerComponent('SampleApp',() => SampleApp);

與以下樣式：

var styles = StyleSheet.create({ 
    container:{ 
     flex:1, 
    flexDirection:'column', 
     justifyContent: 'flex-start', 
     backgroundColor: 'grey' 
    }, 
    descriptionContainerVer:{ 
    flex:0.5, //height (according to its parent) 
    flexDirection: 'column', //its children will be in a row 
    alignItems: 'center', 
    backgroundColor: 'blue', 
    // alignSelf: 'center', 
    }, 
    descriptionContainerVer2:{ 
    flex:0.5, //height (according to its parent) 
    flexDirection: 'column', //its children will be in a row 
    alignItems: 'center', 
    backgroundColor: 'orange', 
    // alignSelf: 'center', 
    }, 
    descriptionContainerHor:{ 
    //width: 200, //I DON\'T want this line here, because I need to support many screen sizes 
    flex: 0.3, //width (according to its parent) 
    flexDirection: 'column', //its children will be in a column 
    alignItems: 'center', //align items according to this parent (like setting self align on each item) 
    justifyContent: 'center', 
    flexWrap: 'wrap' 
    }, 
    descriptionText: { 
    backgroundColor: 'green',//Colors.transparentColor, 
    fontSize: 16, 
    color: 'white', 
    textAlign: 'center', 
    flexWrap: 'wrap' 
    } 
});

這將導致以下畫面：

如何阻止文本脫離屏幕並將其限制在屏幕中間，寬度爲父級的80％。

我不認爲我應該用width，因爲我會在許多不同的手機屏幕上運行這一點，我希望它是動態的，所以我想我應該完全依靠flexbox。

（這是最初的原因，我的descriptionContainerHor內有flex: 0.8

我想實現的是這樣的：！

謝謝

來源

2016-03-29 SudoPlz

我從下面的鏈接找到解決方案。

[Text] Text doesn't wrap #1438

<View style={{flexDirection:'row'}}> 
    <Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd 
    You miss fdd 
    </Text> 
</View>

下面是Github的配置文件用戶鏈接，如果你要感謝他。

Ally Rippley

來源

2017-07-10 15:16:23

謝謝，這是一個很好的答案，但我已經試過了，出於某種原因，它並不總是有效（不知道爲什麼：S）。flexwrap在反應原生中有點片狀。 +1雖然爲此帶來了。 – SudoPlz

這應該被接受回答 –

^^^這是這裏的實際答案。接受這個作品！ – gregblass

在這如果您的文本字段需要width。請將其添加爲：

descriptionText: { 
    width: 200, // any value 
    // ... rest attributes 
}

工作示例這裏：https://rnplay.org/apps/duVfpA

來源

2016-03-29 14:06:46 Cherniv

那是什麼我現在使用，但會這實際上適用於所有屏幕尺寸？如果它是平板電腦，那麼寬度不對。再加上我無法設置一個百分比。我錯了嗎？ – SudoPlz

你可以使用這裏指出的解決方案：http://stackoverflow.com/questions/34837342/font-size-on-iphone-6s-plus – Cherniv

這就是我做的，但它不是想法。我們希望能夠在每個可能的屏幕上運行。 – SudoPlz

，如果你從descriptionContainerVer和descriptionContainerVer2分別除去flexDirection: row工作。

UPDATE（見註釋）

我做了一些改動，以達到我想你了。首先我刪除了descriptionContainerHor組件。然後我將垂直視圖的flexDirection設置爲row，並添加了alignItems: 'center'和justifyContent: 'center'。由於垂直視圖現在實際上沿水平軸堆疊，因此我從名稱中刪除了Ver部分。

所以，現在你有一個包裝視圖，它應該垂直和水平對齊它的內容並沿着x軸堆疊它。然後，我只需在Text組件的左側和右側放置兩個隱形View組件來執行填充。

像這樣：

<View style={styles.descriptionContainer}> 
    <View style={styles.padding}/> 
    <Text style={styles.descriptionText} numberOfLines={5} > 
     Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..! 
    </Text> 
    <View style={styles.padding}/> 
</View>

這：

descriptionContainer:{ 
    flex:0.5, //height (according to its parent), 
    flexDirection: 'row', 
    backgroundColor: 'blue', 
    alignItems: 'center', 
    justifyContent: 'center', 
    // alignSelf: 'center', 
}, 
padding: { 
    flex: 0.1 
}, 
descriptionText: { 
    backgroundColor: 'green',//Colors.transparentColor, 
    fontSize: 16, 
    flex: 0.8, 
    color: 'white', 
    textAlign: 'center', 
    flexWrap: 'wrap' 
},

然後你得到什麼，我相信你是後。

進一步改進工作

現在，如果你想堆的藍色和橙色的觀點中的多個文本區域，你可以做這樣的事情：

<View style={styles.descriptionContainer2}> 
    <View style={styles.padding}/> 
    <View style={styles.textWrap}> 
    <Text style={styles.descriptionText} numberOfLines={5} > 
     Some other long text which you can still do nothing about.. Off the screen we go then. 
    </Text> 
    <Text style={styles.descriptionText} numberOfLines={5} > 
     Another column of text. 
    </Text> 
    </View> 
    <View style={styles.padding}/> 
</View>

凡textWrap的樣式像這樣：

textWrap: { 
    flexDirection: 'column', 
    flex: 0.8 
},

希望這有助於！

來源

2016-03-29 20:48:20

好的，我改變了一些問題，以反映我真正希望達到的目標。現在關於答案：我使用'flexDirection：row'的原因是因爲（如果我有這個權利）'flexDirection'指定該父項的'子項'將被堆疊的方向。現在，我希望**文本**可以成爲連續疊放兒童的父母的中間孩子**，佔據父母寬度的80％（類似於第二張照片）。你能否更新一下這個答案來反映這一點？我願意接受這個答案。 – SudoPlz

對不起，遲到了，很忙。但我已經更新了我的答案，希望這是你需要的。 –

這個答案絕對是驚人的。正是我一直在尋找的，謝謝艾略特!!!!! – SudoPlz

我發現這個問題的另一個解決方案是將文本包裝到視圖中。同時設置視圖的風格flex：1.

來源

2017-02-24 00:00:35 Joel

你只需要有一個包裝爲您<Text>中包含彎曲;

<View style={{ flex: 1 }}> 
    <Text>Your Text</Text> 
</View>

來源

2017-11-05 19:36:49 jsina

這是a known bug。 flexWrap: 'wrap'沒有爲我工作，但這種解決方案似乎對大多數人來說

代碼

<View style={styles.container}> 
    <Text>Some text</Text> 
</View>

風格的作品

export default StyleSheet.create({ 
    container: { 
     width: 0, 
     flexGrow: 1, 
     flex: 1, 
    } 
});

來源

2017-11-12 23:00:39

反應本機文字離開我的屏幕，拒絕包裝。該怎麼辦？

回答

相關問題