2016-04-14 58 views
1

下反应母语的ListView我下面这个tutorial使用TabBarIOS和NavigatorIOS但我的问题是,经过的ListView导航栏“下的”如上面NavigatorIOS

img

下面是截图我的代码:

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; 

我发现发生了,当我把这个代码块(当它的加载)

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

怎么了?在教程中,它很好,但不是我的...

回答

2

当使用NavigatorIOS时,需要为任何高度的下一个组件添加marginTop,所以请在第一个要渲染的组件中尝试类似marginTop:60 。

+0

它伎俩,谢谢。但我认为对此有一个“真正的”答案,因为当我不调用renderLoadingView()方法时,它完美地工作。 – Max

0

从'react-native'导入{Image,StyleSheet,Text,View,ListView,TouchableHighlight}; 从'react'导入React,{Component};

相关问题