使用这段代码：

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

但我想实现这一点：

有任何想法吗？

编辑**答案：

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

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

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