Anzeige: Inline-Äquivalent in React Native

Question

Es scheint, als ob ich Probleme mit dem Erstellen eines Displays habe: Inline-Styling entspricht Flexbox. Bisher habe ich folgendes erreicht (wo die roten und blauen Linien, die durch die Grenzfunktion geregelt sind mit Styling zu helfen):

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

Aber ich möchte

Ideen: dies zu erreichen?

EDIT ** ANTWORT:

benötigt das Styling der folgenden Änderungen:

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

So von flexDirection in Spalte verwenden und Zeile für Scroll Inline-Kinder bleiben arbeitet

Answer 1

ändern musste das Styling zu den folgenden:

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