我们在公司也遇到了同样的问题,据我所知,没有非常规的解决方法。
我们的处理方式是完全删除主容器中的alignItems属性,并给容器添加flex:1属性。然后,我们使用alignItems: 'center'来修饰任何需要的子组件,而不会将样式传递给所有子组件。
我已经设置了一个示例,您可以在
这里查看,并将代码粘贴如下。
'use strict';
var React = require('react-native');
var {
AppRegistry,
Image,
StyleSheet,
Text,
View,
Dimensions
} = React;
var width = Dimensions.get('window').width
var shortText = "Lorem ipsum dolor sit amet, consectetur adipis.";
var longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin ligula ut leo dictum, id elementum sapien faucibus. Nullam et feugiat neque";
var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={ styles.alignCenter }>
<Text>{shortText}</Text>
</View>
<Text/>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<Image source={{uri: "http://icons.iconarchive.com/icons/designbolts/free-male-avatars/128/Male-Avatar-icon.png"}} style={{height: 32, width: 32}}/>
<View style={{ flex:1 }}>
<Text >{longText}</Text>
</View>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
padding: 30,
marginTop: 65,
flexWrap: 'wrap',
flex:1
},
alignCenter: {
alignItems: 'center'
}
})
AppRegistry.registerComponent('SampleApp', () => SampleApp);