messageBar shows behind listview

[zipzou]

There is a listview to load data, when these datas are loaded, I want to show a message bar to notice user the status of the result, but the bar is showing behind the listview.

If the message bar element placed after listview, then the bar would show at the bottom with the screen as this listview is being full with datas

So, what should I do ?

The main code is like this:

      <View
        style = {styles.container}
      >
        <View>
          <MessageBar style={{position: 'absolute'}} ref='messageAlert' />
        </View>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.getExamCell}
          enableEmptySections={true}
          stickySectionHeadersEnabled = {false}
          renderSectionHeader={this.renderSectionHeader}
        />
       </View>

componentDidMount() {
    MessageBarManager.registerMessageBar(this.refs.messageAlert)
  }

  componentWillUnmount() {
    MessageBarManager.registerMessageBar(this.refs.messageAlert)
  }

The code to fetch data:

renderExamDatasource = (url) => {
    fetch(url).then((response) => (response.json()))
    .then((jsonBody) => {
      let local = [array.first(jsonBody.param)]
      if (jsonBody.success) {
        MessageBarManager.showAlert({
          title: '加载成功',
          message: '共为你获取到' + (jsonBody.param.length + local.length) + '条数据',
          alertType: 'info',
        })
      } else {
        MessageBarManager.showAlert({
          title: 'error',
          message: jsonBody.param ? 'unknow reason' : jsonBody.param,
          alertType: 'warning',
        })
      }
    })
    .catch(reason => {
      MessageBarManager.showAlert({
        title: '加载错误',
        message: '网络错误，无法加载到您所需的数据',
        alertType: 'warning',
      })
    })
  }

The screenshot is like this: