显示:React Native中的内联等效

好像我在创建显示器时遇到了问题:与flexbox等效的内联样式.到目前为止,我已经实现了以下功能(红色和蓝色线由边框功能控制,以帮助设置样式):

使用此代码:

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 (
            
                
                    
                        
                            
                            
                        
                    
                    
                        
                            {this.renderKeywordBoxes()}
                        
                    
                
            
        );
    }, 
    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 
                {keyword}
            
        });
    }, 
    //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, 
        marginTop: window.height/35,
    }, 
    //container style wrapper for scrollview
    footerWrapper: {
        flexWrap: 'wrap', 
        alignItems: 'flex-start',
    },
    //non-container style wrapper for scrollview
    footerWrapperNC: {
        flexDirection:'row',

    },
    container: {
        flex: 1, 
        alignItems: 'center', 
        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',
        color: 'white', 
        letterSpacing: 1.5,
        textAlign: 'center'
    }, 
    keywordBox: {
        backgroundColor: 'transparent',
        margin: 3, 
        borderColor: 'rgb(176,224,230, 0.6)', 
        borderWidth: 1,
    },
});

但我想实现这个目标:

有任何想法吗？

编辑**答案:

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

//container style wrapper for scrollview
    footerWrapper: {
        flexWrap: 'wrap', 
        alignItems: 'flex-start',
        flexDirection:'row',
    },
    //non-container style wrapper for scrollview
    footerWrapperNC: {
        flexDirection:'column',
    },

因此,在scrollView中使用flexDirection的列和行可以使子项保持内联

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

//container style wrapper for scrollview
    footerWrapper: {
        flexWrap: 'wrap', 
        alignItems: 'flex-start',
        flexDirection:'row',
    },
    //non-container style wrapper for scrollview
    footerWrapperNC: {
        flexDirection:'column',
    },

这对我有用:

import {View, Text} from 'react-native';


 Hello


const styles = StyleSheet.create({
   container: {
     flexDirection: 'row', 
     alignSelf: 'flex-start'
   }
});