Приложение Black & Screed iOS сверху и снизу с использованием NativeBase - PullRequest
1 голос
/ 11 января 2020

Я использую ReactNative, и приложение хорошо работает на ios и android, но проблема с iPhone X и выше. Он показывает черный экран сверху и снизу. Я использую NativeBase. Пожалуйста, смотрите скриншот ниже для справки.

enter image description here

Код

<Container style={{ backgroundColor: '#f3f3f3'}}>
                        <Content>
                            <ScrollView style={{ flex: 1,backgroundColor: '#f3f3f3' }}>
                            <View style={{flex: 1}} data ={ app_settings } renderItem={this.renderItem} >
                                <ImageBackground source={{ uri: app_settings.heroImage }} style={styles.container}>
                                    <View style={styles.headerContainer}>
                                         <View style={styles.hamburgerContainerHome}>
                                            <TouchableOpacity onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer()) } >
                                                 <Image style = {styles.hamburger} source = {hamburger} />
                                             </TouchableOpacity>
                                         </View>
                                         <View style={styles.logoContainer}>
                                            <Image style = {styles.logo} source = {logo} />
                                         </View>
                                    </View>

                                    <View style={styles.emptyHero}>
                                    </View>
                                    <View style={styles.textContainer}>
                                        <HTML tagsStyles={htmstyles} imagesMaxWidth={15} style={{ color:'white',flex:1 }} html={app_settings.heroText}  />

                                    </View>
                                    <View style={styles.emptyHero}>
                                    </View>
                                </ImageBackground>
                            </View>
                            <Subscribe />
                            <View style={styles.mainContainer}>
                                <Text style={styles.localRep}>{app_settings.localRepHeading}</Text>
                                <Text style={styles.localRepBottom}>{app_settings.localRepSubHeading}</Text>
                                 <View style={{flex: 1, paddingBottom:10,paddingTop:10,justifyContent: 'flex-start',flexDirection: 'row' }}>
                                    <Image style = {styles.localRepImg} source = {localReps} />
                                 </View>
                                  <View style={styles.headerContainer}>
                                     <ScrollView
                                                 horizontal
                                                 pagingEnabled
                                                 showsHorizontalScrollIndicator={false}
                                               >
                                        {contents}
                                     </ScrollView>
                                  </View>
                            </View>

                            </ScrollView>
                        </Content>

                        <BottomNavigation />
                    </Container>
...