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

Question

我正在开发 React Native 应用程序。这些组件按照我的意愿垂直居中，但都在底部对齐，无法让它们向上移动到屏幕顶部。

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

我怎样才能让他们上升到顶部？

请注意：屏幕中的黄色表示组件的视图延伸了多远。我不知道如何调整 'yellow' 视图。 'yellow' 视图仅包含 donut/menu 按钮。

<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

你在style={styles.drawerButton}里面给出了flex:1，所以它占满了整个space，其他东西都被推到了屏幕的末尾，请删除[=15] =]，并从容器样式中删除 justifyContent: 'center'。那么所有的内容都会被移到顶部

Answer 2

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

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

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

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

您可能必须摆脱其他一些样式，至少是暂时的，这样您就可以看到发生了什么。

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

StyleSheet /CSS : Placing Components in React Native

css

stylesheet

react-native-android