[StyleSheet / CSS：在React Native中放置组件

Question

我正在开发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',

        },

});

谢谢

Answer 1

您在flex:1内输入了style={styles.drawerButton}，这就是为什么它占据了整个空间以及其他东西被推到屏幕末端的原因，请从其中移除flex：1，然后从容器中移除justifyContent: 'center'样式。然后所有内容将移到顶部

Answer 2

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

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

position: absolute在菜单上。这意味着菜单将显示在相同位置，而不管其他内容。使用top: 10px; left: 10px控制菜单的实际位置。

菜单的

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

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