web-dev-qa-db-ja.com

表示：React Nativeのインラインと同等

ディスプレイの作成で問題が発生しているようです：flexboxと同等のインラインスタイル。これまでのところ、私は次のことを達成しました（赤と青の線は、スタイリングを支援するためにborder関数によって管理されています）。

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

しかし、私はこれを達成したいと思います：

Frame UI/UX

何か案は？

編集**回答：

スタイルを次のように変更する必要がありました。

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

したがって、scrollViewの列と行でflexDirectionを使用すると、子はインラインのままになります

cssflexboxreact-native
41
Robert Tomas G IV

スタイルを次のように変更する必要がありました。

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

これは私のために働く：

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

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

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