react-native - React Native ListView Insets

Question

我无法将我的 ListView 与导航栏对齐。

我尝试过使用插图，它适用于 iOS，但对于 android 问题仍然存在。

我原以为 Listview(iOS) 的插图会自动设置。在这种情况下，automaticAdjustContentInsets={true} 不起作用。我在插图中进行了硬编码。

对于 iOS，listView 的运行速度似乎也有点慢。

Android 的问题是 listView 似乎没有正确插入。

我的怀疑是 react native flux router 没有考虑导航栏下方的内容。

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

"react-native-router-flux": "^3.30.0",
"react-native": "^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

属性(property)contentInset是 ios 特定的属性。不适用于安卓。您可以使用边距/填充来实现相同的效果。