when i click the picture, the picture will zoom out but didnot cover the full screen.

[TonyGao625]

I used react-native-lightbox with react navigation. when i click the picture, the picture will zoom out but didnot cover the full screen. the header was not fully covered. Please see the picture below.

Here is my code.
class LightboxView extends Component {
componentWillMount() {
this.props.dispatch(getBookById(this.props.id));
}
render() {
const { BookDetail } = this.props;
return (
<ScrollableTabView
style={styles.container}
renderTabBar={() => }
tabBarPosition='overlayTop'
>



<Image
style={styles.contain}
resizeMode="contain"
source={{ uri: 'https://www.yayomg.com/wp-content/uploads/2014/04/yayomg-pig-wearing-party-hat.jpg' }}
/>


{BookDetail.BookName}



<Icon
name={'event-note'}
color='black'
size={20} />
图书介绍：

{BookDetail.Remark}



<Icon
name={'person'}
color='black'
size={20} />
作者：

{BookDetail.Author}



<Icon
name={'date-range'}
color='black'
size={20} />
出版日期：

{!BookDetail.PublicDate ? "无" : Moment(BookDetail.PublicDate).format('MM/DD/YYYY')}



<Icon
name={'art-track'}
color='black'
size={20} />
分类：

{BookDetail.CategoryName}




<View style={{ flexDirection: 'row', marginTop: 70 }}>
<View style={{ flex: 1, marginLeft: 18, }}>
借阅起始日

<View style={{ flex: 1, }}>
还书日

<View style={{ flex: 1, marginRight: 0, }}>
借阅人

                {BookDetail.BookBorrowList && BookDetail.BookBorrowList.map((val) => {
                    return <View style={{ flexDirection: 'row', marginTop: 10 }} key={val.Id} >
                        <View style={{ flex: 1, marginLeft: 18 }}>
                            <Text style={styles.boldText}>{Moment(val.BorrowDate).format('MM/DD/YYYY')}</Text>
                        </View>
                        <View style={{ flex: 1 }}>
                            <Text style={styles.boldText}>{!val.ReturnDate ? "未还" : Moment(val.ReturnDate).format('MM/DD/YYYY')}</Text>
                        </View>
                        <View style={{ flex: 1, marginRight: 0 }}>
                            <Text style={styles.boldText}>{!val.UserName ? "" : val.UserName}</Text>
                        </View>
                    </View>
                })}
            </ScrollView>
        </ScrollableTabView>
    );
}

}

export default class BookDetailDisplays extends Component {
renderScene = (route, navigator) => {
var Component = route.component;
return (
<Component navigator={navigator} id={this.props.id} route={route} {...route.passProps} />
);
}

render() {
    return (
        <Navigator
            ref="navigator"
            style={styles.navigator}
            renderScene={this.renderScene}
            initialRoute={{
                component: LightboxView,
            }}
        />
    );
}

}