リアクト - ネイティブのListViewをNavigatorIOS

Question

の下で、私はTabBarIOSとNavigatorIOSを使用するには、このtutorialを以下のよしかし私の問題は、リストビューが

上のスクリーンショットのようにナビゲーターバーがここにある「下」渡すことです私のコード：私が見つけ

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> 
); 
} 

012（それはロードだとき）、私はこのコードのブロックを呼び出すとき

どういうところが間違っていますか？チュートリアルでは素晴らしいですが、私の中ではうまくいきません..

Answer 1

NavigatorIOSを使用する場合は、高さが何であれ次のコンポーネントにmarginTopを追加する必要があります。したがって、レンダリングしている最初のコンポーネントでmarginTop：60 。

Answer 2

'react-native'の{image、StyleSheet、Text、View、ListView、TouchableHighlight}をインポートします。 import Reactから{Component}を返します。