在NavigatorIOS下反应本机ListView

下面我将使用TabBarIOS和NavigatorIOS，但我的问题是ListView会像上面的屏幕截图一样通过导航栏的“下方”

这是我的密码：

var React = require('react-native');

var REQUEST_URL = 'https://www.googleapis.com/books/v1/volumes?q=subject:fiction';

var {
    Image,
    StyleSheet,
    Text,
    View,
    Component,
    ListView,
    TouchableHighlight,
    ActivityIndicatorIOS,
   } = React;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 10,
  },
  thumbnail: {
    width: 53,
    height: 81,
    marginRight: 10,
  },
  rightContainer: {
    flex: 1,
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
  },
  author: {
    color: '#656565',
  },
 separator: {
    height: 1,
    backgroundColor: '#dddddd',
  },
  listView: {
    backgroundColor: '#F5FCFF',
  },
  loading: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

class BookList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
    };
  }

 componentDidMount() {
   this.fetchData();
 }

    fetchData() {
      fetch(REQUEST_URL)
      .then((response) => response.json())
        .then((responseData) => {
          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(responseData.items),
            isLoading: false,
          });
        })
        .done();
    }

render() {
  if (this.state.isLoading) {
    return this.renderLoadingView();
  }

  return (
  <ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderBook.bind(this)}
      style={styles.listView}
      />
    );
}

renderLoadingView() {
  return (
      <View style={styles.loading}>
       <ActivityIndicatorIOS
          size='large'/>
                  <Text>
            Loading books...
                  </Text>
          </View>
  );
}

renderBook(book) {
  return (
       <TouchableHighlight>
         <View>
             <View style={styles.container}>
                     <Image
                         source={{ uri: book.volumeInfo.imageLinks.thumbnail }}
                         style={styles.thumbnail} />
                     <View style={styles.rightContainer}>
                     <Text style={styles.title}>{book.volumeInfo.title}</Text>
                      <Text style={styles.author}>{book.volumeInfo.authors}</Text>
                     </View>
             </View>
             <View style={styles.separator} />
     </View>
 </TouchableHighlight>
  );
     }
    }

module.exports = BookList;

var React=require（'React-native'）；
var请求https://www.googleapis.com/books/v1/volumes?q=subject:fiction';
变量{
形象,，
样式表，
文本，
看法
组成部分，
ListView，
触控高光，
活动指标，
}=反应；
var styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'行'，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
填充：10，
},
缩略图：{
宽度：53，
身高：81，
marginRight:10，
},
rightContainer：{
弹性：1，
},
标题：{
尺寸：20，
marginBottom:8，
},
作者：{
颜色：“#6565”，
},
分离器：{
身高:1,，
背景颜色：“#dddddd”，
},
列表视图：{
背景颜色：“#F5FCFF”，
},
装载：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});
类BookList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
数据源：新建ListView.dataSource({
行已更改：（行1，行2）=>行1！==行2，
}),
};
}
componentDidMount（）{
这是fetchData（）；
}
fetchData（）{
获取（请求URL）
.then（（response）=>response.json（））
.然后（（响应数据）=>{
这是我的国家({
dataSource:this.state.dataSource.cloneWithRows（responseData.items），
孤岛加载：false，
});
})
.完成（）；
}
render（）{
if（此.state.isLoading）{
返回此.renderLoadingView（）；
}
返回(
);
}
renderLoadingView（）{
返回(
正在加载书籍。。。
);
}
renderBook（书籍）{
返回(
{book.volumeInfo.title}
{book.volumeInfo.authors}
);
}
}
module.exports=图书列表；

我发现在调用此代码块（加载时）时发生了这种情况

renderLoadingView（）{
返回(
正在加载书籍。。。
);
}

---

怎么了？在本教程中，它的效果非常好，但在我的教程中却不是这样。

当使用NavigatorIOS时，您需要将marginTop添加到下一个组件中，无论其高度如何，因此请在渲染的第一个组件中尝试类似marginTop:60的内容。

从“react-native”导入{Image，StyleSheet，Text，View，ListView，TouchableHighlight}；

---

从“React”导入React，{Component}

这很管用，谢谢。但我认为这是一个“真实”的答案，因为当我不调用renderLoadingView（）方法时，它可以完美地工作。

renderLoadingView() {
  return (
      <View style={styles.loading}>
                      <ActivityIndicatorIOS
              size='large'/>
                      <Text>
                Loading books...
                      </Text>
              </View>
  );
}