css – 显示：Inact等效于React Native

看起来好像我在创建一个显示器时有问题：inline样式与flexbox相当.到目前为止,我已经实现了以下(红色和蓝色线条由边框功能控制以帮助造型)：

@L_607_0@

使用这段代码：

@H_616_6@var React = require('react-native'); var { View,ScrollView,Image,StyleSheet,Text,TouchableHighlight,} = React; //additional libraries var Parse = require('parse/react-native'); //parse for data storage Icon = require('react-native-vector-icons/Ionicons'); //vector icons //dimensions var Dimensions = require('Dimensions'); var window = Dimensions.get('window'); //dynamic variable components var ImageButton = require('../common/imageButton'); //var KeywordBox = require('./onboarding/keyword-box'); module.exports = React.createClass({ render: function() { return ( <View style={[styles.container]}> <Image style={styles.bg} source={require('./img/login_bg1_3x.png')}> <View style={[styles.header,this.border('red')]}> <View style={[styles.headerWrapper]} > <Image resizeMode={'contain'} style={[styles.onboardMsg]} source={require('./img/onboard_msg.png')} > </Image> </View> </View> <View style={[styles.footer,this.border('blue')]}> <ScrollView horizontal={falsE} style={styles.footerWrapperNC} contentContainerStyle={[styles.footerWrapper]}> {this.renderKeywordBoxes()} </ScrollView> </View> </Image> </View> ); },renderKeywordBoxes: function() { //renders array of keywords in keyword.js //and maps them onto custom component keywordbox to show in the onboarding //component var Keywords = ['LGBQT','#BlackLivesmatter','Arts','Hip-Hop','History','Politics','Comedy','Fashion','Entrepreneurship','Technology','Business','International','Health','Trending','Music','Sports','Entertianment']; return Keywords.map(function(keyword,i) { return <TouchableHighlight style={styles.keywordBox} key={i} underlayColor={'rgb(176,224,230,0.6)'} > <Text style={styles.keywordText} >{keyworD}</Text> </TouchableHighlight> }); },//function that Helps with laying out flexbox itmes //takes a color argument to construct border,this is an additional //style because we dont want to mess up our real styling border: function(color) { return { borderColor: color,borderWidth: 4,} },}); styles = StyleSheet.create({ header: { flex: 2,},headerWrapper: { flex: 1,flexDirection: 'column',alignItems: 'center',justifyContent:'space-around',marginTop: window.height/35,onboardMsg: { width: (window.width/1.3),height: (452/1287)*((window.width/1.3)),footer: { flex: 7,//container style wrapper for scrollview footerWrapper: { flexWrap: 'wrap',alignItems: 'flex-start',//non-container style wrapper for scrollview footerWrapperNC: { flexDirection:'row',container: { flex: 1,justifyContent: 'center',bg: { flex: 1,width: window.width,height: window.height,actionButtonIcon: { fontSize: 20,height: 22,color: 'white',keywordText: { fontFamily: 'Bebas Neue',fontSize: 18,padding: 6,fontWeight: 'bold',letterSpacing: 1.5,textAlign: 'center' },keywordBox: { BACkgroundColor: 'transparent',margin: 3,borderColor: 'rgb(176,0.6)',borderWidth: 1,});

但我想实现这一点：

有任何想法吗？

编辑**答案：

需要将样式更改为以下内容：

@H_616_6@//container style wrapper for scrollview footerWrapper: { flexWrap: 'wrap',flexDirection:'row',//non-container style wrapper for scrollview footerWrapperNC: { flexDirection:'column',

所以在列和列中使用flexDirection来scrollView可以让孩子保持内联