Các mã sau đây có thể được tìm thấy trong ví dụ trực tiếp này
Tôi đã có các yếu tố bản địa phản ứng sau:
'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);
với các phong cách sau:
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'
}
});
Kết quả này trong màn hình sau:
Làm cách nào tôi có thể ngăn văn bản tắt khỏi màn hình và giữ nó ở giữa màn hình với chiều rộng tức là 80% của phụ huynh.
Tôi không nghĩ mình nên sử dụng widthvì tôi sẽ chạy nó trên NHIỀU màn hình di động khác nhau và tôi muốn nó phải năng động, vì vậy tôi nghĩ rằng tôi nên hoàn toàn dựa vào flexbox.
(Đó là lý do ban đầu tại sao tôi có flex: 0.8trong descriptionContainerHor.
Những gì tôi muốn đạt được là một cái gì đó như thế này:
Cảm ơn bạn!
![d] kết quả của tôi [1]](https://i.stack.imgur.com/6FtkP.png)