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

Posted 2023-03-06

【中文标题】显示：React Native 中的内联等效项

【英文标题】：Display: Inline Equivalent in React Native

【发布时间】：2016-03-12 14:21:29

【问题描述】：

似乎我在创建显示时遇到了问题：内联样式等效于 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 (
            <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,
    ,
);

但我想实现这个：

有什么想法吗？

编辑**答案：

需要将样式更改为以下：

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

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

【参考方案1】：

这对我有用：

import View, Text from 'react-native';

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

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

【讨论】：

棒极了，简单实用！

【参考方案2】：

需要将样式更改为以下：

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

【讨论】：

似乎 flexbox 完全改变了布局范式。我不确定这是否是 React Native 的缺点，或者这是否是 flexbox 布局的预期。有人可以帮我解释一下吗？

@KamuelaFranco 这就是 FLexbox 应该有的样子（对不起，回复迟了！）。样式设置了一个先例，迫使您使其具有响应性 - 而不是使用固定的宽度和高度尺寸