StyleSheet /CSS : 在 React Native 中放置组件答案

【问题标题】：StyleSheet /CSS : Placing Components in React NativeStyleSheet /CSS : 在 React Native 中放置组件
【发布时间】：2020-04-29 05:06:32
【问题描述】：

我正在开发一个 React Native App 。组件按我的意愿垂直居中，但都在底部对齐，无法让它们向上移动到屏幕顶部。

请看一下布局屏幕（附在此处）。

我怎样才能让他们向上移动？

请注意：屏幕中的黄色是为了弄清楚组件的视图延伸了多远。我想不出调整“黄色”视图。 “黄色”视图仅假设包含甜甜圈/菜单按钮。

<View style={styles.container}>


                    <TouchableOpacity style={styles.drawerButton} onPress={() => this.props.navigation.openDrawer()} >
                         <Image
                             source={menu}
                            style={{width: 25, height: 25, marginLeft: 5}}
                         />
                      </TouchableOpacity>



                        <TextInput style={styles.addText} placeholder="Add New Item"/>



                            <Button style = {styles.submitButton} title = "Add" />


                       <TouchableOpacity style = {styles.pictureButton} onPress = {this.setCameraWindow}>
                            <Text style={{fontSize:14}}> Take Picture </Text>
                        </TouchableOpacity>


                            {this.state.isCameraVisible ? this.takePicture() : null }



                    </View>

        );
    }

}

const styles = StyleSheet.create ({

       container:{
           flex:1,
           flexDirection: 'column',
           alignItems:'center',
           flexGrow: 1,
           justifyContent: 'center',
           backgroundColor: 'blue'

       }, 

       drawerButton:{
        flex:1,
        flexDirection:'row',
        alignSelf:'flex-start',
        backgroundColor:'yellow'    
       },

        menuButton: {
            height:50,
            flex:1,
            flexDirection:'column',
            alignSelf:'flex-start',
            backgroundColor:'yellow',



        },

        addText:{

            flex:1,
            flexDirection:'column',
            justifyContent:'center',
            backgroundColor:'white',
            borderBottomColor: 'black',
            borderBottomWidth: 2,
            alignSelf:'center',
            maxHeight:50,

          },

        submitButton:{

            justifyContent:'center'
        },

        pictureButton:{
            backgroundColor:'white',
            justifyContent: 'center',

        },

});

谢谢

【问题讨论】：

标签： css react-native-android stylesheet

【解决方案1】：

你在style={styles.drawerButton}里面给了flex:1，这就是为什么它占据了整个空间和其他东西被推到屏幕的末尾，请从中删除flex：1，并从其中删除justifyContent: 'center'容器样式。然后所有的内容都会移到顶部

【讨论】：

感谢您的澄清和解释。

【解决方案2】：

These styles 是您所需要的。具体来说：

overflow: hidden：菜单折叠时隐藏黄色位。

position: absolute 在菜单上。这意味着无论其他内容如何，菜单都将出现在相同的位置。使用top: 10px; left: 10px控制菜单的实际定位。

position: relative 在菜单的 parent (TouchableOpacity) 元素上。这意味着菜单的position: absolute 将相对于父元素。

您可能必须摆脱一些其他样式，至少是暂时的，这样您才能看到正在发生的事情。

【讨论】：