CSS 显示：React Native 中的内联等效项

Display: Inline Equivalent in React Native

提问by Robert Tomas G IV

It seems as though I am having problems with creating a display: inline styling equivalent with flexbox. So far I have achieved the following (where the red and blue lines are governed by the border function to help with styling):

似乎我在创建显示时遇到了问题：与 flexbox 等效的内联样式。到目前为止，我已经实现了以下目标（其中红线和蓝线由边框函数控制以帮助进行样式设置）：

With this code:

使用此代码：

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, 
        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,
    },
});

But I would like to achieve this:

但我想实现这一目标：

any ideas?

有任何想法吗？

EDIT** ANSWER:

编辑**答案：

Needed to change the styling to the following:

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

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

So use of flexDirection in column and row for scrollView works children stay inline

因此，在滚动视图的列和行中使用 flexDirection 可以使孩子保持内联

回答by Robert Tomas G IV

Needed to change the styling to the following:

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

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

回答by Ashish Rawat

This works for me:

这对我有用：

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

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

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