反应本机ListView插入

Question

我有麻烦对齐我的列表视图与导航栏。

我已经尝试与插入工作，它已为iOS工作，但对于Android的问题仍然存在。

我原以为Listview（iOS）的insets会自动设置。在这种情况下，automaticAdjustContentInsets = {true}不起作用。我硬编码插入。

它也似乎listView运行有点慢iOS的。

Android的问题在于listView看起来没有正确插入。

我的怀疑是，反应本地通量路由器不考虑内容，在导航栏下方。

我正在使用React-native-router-flux导航呈现导航栏。

“反应天然路由器通量”： “^ 3.30.0”， “响应天然的”： “^ 0.28.0”，

``` 
    /// Render function for app container. 
     render() { 
      return (<Router> 
          <Scene key="root"> 
           <Scene key="Home" component={Home} title="Home" initial={true} navigationBarStyle={{backgroundColor:'transparent'}}></Scene> 
          </Scene> 
        </Router>); 
     } 


    ``` 

    ```javascript 
    //listview render 

    import React from 'react'; 
    import { Text, View, ListView} from 'react-native'; 

    import ApiClient from '../../networking/apiClient' 


    import { Actions } from 'react-native-router-flux' 

    class Home extends React.Component { 

     constructor(props){ 
       super(props) 

      let apiClient = new ApiClient() 
      let username = '0853795' 
      let password = 'waosuchpassword123' 

      apiClient.login(username,password).then((json) => { 
       console.log(JSON.stringify(json)) 
       return apiClient.retrieveBalanceInformation() 
      }).then((json) => { 
       console.log(JSON.stringify(json)) 
       return apiClient.retrieveTransactionInformation() 
      }).then((json) =>{ 
       console.log(JSON.stringify(json)) 
      }).catch((error) =>{ 
       console.log(error) 
      }) 

      this.ds = new ListView.DataSource(
       { 
        rowHasChanged: this.rowHasChanged, 
        sectionHeaderHasChanged:this.sectionHeaderHasChanged, 
        getSectionHeaderData:this.getSectionHeaderData, 
        getRowData:this.getRowData, 
       }); 


      this.data = 
       { 
        'section1': 
        [ 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         } 
        ], 
        'section2':[ 
         { 
          firstName:'Andrew', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Lilian', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         }, 
         { 
          firstName:'Michael', 
          lastName:'Chung', 
         }, 
         { 
          firstName:'Angelica', 
          lastName:'Ramos', 
         } 
        ] 
       } 


     } 

     componentDidMount =() =>{ 
      // make network request with action 
     } 

     getSectionHeaderData = (dataBlob, sectionID) =>{ 
      return dataBlob[sectionID] 
     } 

     sectionHeaderHasChanged = (s1, s2) => { 
      return s1 !== s2 
     } 

     getRowData = (dataBlob, sectionID, rowID) => { 
      return dataBlob[sectionID][rowID] 
     } 

     rowHasChanged = (r1, r2) => { 
      return r1 !== r2 
     } 

     renderRow = (rowData,sectionID, rowID, highlightRow) => { 

      return (<View key={rowID}> 
        <Text> {`RowID: ${rowID}`} </Text> 
        <Text> {`FirstName: ${rowData.firstName}`} </Text> 
        <Text> {`LastName: ${rowData.lastName}`} </Text> 
       </View> 
      ); 
     } 

     renderSectionHeader = (sectionData, sectionID) => { 
      return(<View key={sectionID}> 
        <Text> {`SectionID: ${sectionID}`} </Text> 
       </View> 
      ); 
     } 

     renderSeparator = (sectionID, rowID, adjacentRowHighlighted) => { 
      return (<View key={sectionID + rowID}height={1} backgroundColor={'#0000001e'}/> 
      ); 
     } 

     renderFooter =() => { 
      return (<View height={80} alignSelf={'stretch'} backgroundColor={'#0000001e'}/> 
      ); 
     } 

     render=() => { 
      return (<ListView 
       initialListSize={100} 
        dataSource={this.ds.cloneWithRowsAndSections(this.data)} 
        renderRow={this.renderRow} 
        renderSectionHeader={this.renderSectionHeader} 
        renderSeparator={this.renderSeparator} 
        // Offset the content then set the insets to ensure that the bars are in the correct position. 
        contentOffset={{x: 0, y: -64}} 
        contentInset={{top: 64, bottom: 49}} 
        automaticallyAdjustContentInsets={true} 
        />); 
     } 
    } 

    export default Home; 

    /** 

    **/ 

``` 

Answer 1

属性contentInset是一个ios特定的属性。它不适用于android。你可以使用margin/paddings来达到同样的效果。

Answer 2

正如agent_hunt说contentInset是IOS具体，在Android上实现这一点，你需要设置的<ListView contentContainerStyle={styles.contentContainer}> </ListView>

然后里面的属性在stylesheets.create

var styles = StyleSheet.create({ 
    contentContainer: { 
    paddingBottom: 100 
    }