StyleSheet / CSS: размещение компонентов в React Native - PullRequest
Новая
       43

StyleSheet / CSS: размещение компонентов в React Native

0 голосов
/ 29 апреля 2020

Я работаю над приложением React Native. Компоненты расположены по центру вертикально, как я хочу, но все выровнены по низу и не могут заставить их двигаться вверх к верхней части экрана.

Пожалуйста, посмотрите на экран макета (прилагается здесь).

Как я могу заставить их двигаться вверх?

Обратите внимание: желтый цвет на экране показывает, как далеко простирается вид компонента. Я не мог понять, чтобы настроить «желтый» вид. Предполагается, что «желтый» вид состоит только из кнопки пончика / меню. 

<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',

        },

});

Спасибо enter image description here

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Вы указали flex:1 внутри style={styles.drawerButton}, поэтому он занимает все пространство, а другие объекты выдвигаются до конца экрана, пожалуйста, удалите flex: 1 с этого, а также удалите justifyContent: 'center' с контейнерный стиль. Тогда весь контент будет перемещен в верх

0 голосов
/ 29 апреля 2020

Эти стили - это то, что вам нужно. В частности:

overflow: hidden: скрывает желтый бит, когда меню свернуто.

position: absolute в меню. Это означает, что меню будет отображаться в той же позиции независимо от другого содержимого. Используйте top: 10px; left: 10px для управления фактическим позиционированием меню.

position: relative в элементе parent (TouchableOpacity) меню. Это означает, что position: absolute меню будет относиться к родительскому элементу.

Возможно, вам придется избавиться от некоторых других стилей, хотя бы временно, чтобы вы могли видеть, что происходит.

...