反应本机将自定义组件移到页面主体组件上

Question

我有一个在另一个组件中调用的自定义组件<Header has_image={ true } />，它在除登录页面之外的所有页面上都工作正常，在登录页面中，我必须添加图像而不是标题并将图像从页面顶部推送在标题和正文之间居中，问题是图像进入页面正文之下，并且我尝试了绝对位置的z-indexing，但运气不佳

这是我的Header.js文件

render () {

    return (

      <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} colors={['#a4d294', '#3ac6f3']} style={ styles.header }>

          <TouchableOpacity style={[ (this.state.user && this.state.user.userType == 'doctor') ? styles.add_button : null ]}>

            { (this.state.user && this.state['userType'] == 'patient') ? <Image source={ require('@media/images/add.png') } style={ styles.add_button } /> : null }

          </TouchableOpacity>

          { this.props.has_image ?
              <Image source={ require('@media/images/header-image.png') } style={ styles.header_image } />
            :
            <Text style={ styles.title }> { this.props.title } </Text>
          }

          <TouchableOpacity onPress={ () => this.props.open_drawer() }>

            { this.state.user ? <Image source={ require('@media/images/more.png') } style={ styles.more_button } /> : null }

          </TouchableOpacity>

      </LinearGradient>

    )

  }

}

const styles = StyleSheet.create({
  header : {
    height: 90,
    backgroundColor: '#eee',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  title : {
    color : '#fff',
    textAlign: 'center',
    fontSize: 20,
    letterSpacing: 3
  },
  header_image : {
    width: 80,
    height: 80,
    resizeMode: 'contain',
    marginTop: 90,
    zIndex: 2,
  },
  add_button : {
    width: 30,
    height: 30,
    marginHorizontal: 10
  },
  more_button : {
    width: 30,
    height: 30,
    marginHorizontal: 10
  }
})

这是我要覆盖图像的组件

<View style={ styles.container }>

        <Header has_image={ true } />

        <ScrollView style={ styles.body } behavior="padding" enabled>

          <View style={ styles.terms_container }>

            <Text style={ styles.terms }>

              The Privacy of the registrants in this program is very important to us. visitors and other registrants will not be able to see any existing personal data

            </Text>

          </View>

            <KeyboardAvoidingView style={ styles.form }>

              { this.state.error ? <Text style={ styles.error }> { this.state.error } </Text> : null }

              <Input
                label='Email Address'
                onChangeText={ (email) => this.setState({ email : email }) }
                keyboardType="email-address"
              />

              <Input
                label='Password'
                onChangeText={ (password) => this.setState({ password : password }) }
                password={ true }
              />

              <Gradient
                disabled={ this.state.loading }
                onPress={ this.login }
                text={ "LOGIN" }
                gradient_style={ styles.button_gradient }
                text_style={ styles.button_text }
                button_style={ styles.button_style }
              />

            </KeyboardAvoidingView>

        </ScrollView>

      </View>

我想要的结果

我得到的结果