我无法将列表视图与导航栏对齐。
我尝试过使用插图，它适用于 iOS，但对于 android，问题仍然存在。
我原以为 Listview(iOS) 的插图会自动设置。在这种情况下，automaticAdjustContentInsets={true} 不起作用。我在插图中硬编码。
对于 iOS，listView 的运行速度似乎也有点慢。
Android 的问题是 listView 似乎没有正确插入。
我的怀疑是反应原生通量路由器没有考虑导航栏下方的内容。
我正在使用 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;
/**
**/
```