2
リストビューとナビゲーションバーの位置合わせに問題があります。ネイティブリストビューインセットに反応する
私はインセットで作業を試みましたが、それはiOSで動作しましたが、アンドロイドではまだ問題が残っています。
リストビュー（iOS）のインセットが自動的に設定されると思っていました。この場合、automaticallyAdjustContentInsets = {true}は機能しません。私はインセットで難しいコードを書いた。
また、listViewがiOSで少し遅く動作しているようです。
Androidの問題点は、listViewが正しくインセットされていないことです。
私の疑惑は、反応するネイティブのフラックスルータは、ナビゲーションバーの下のコンテンツを考慮しないということです。
私はnavbarをレンダリングするナビゲーションに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;
/**
**/
```
FPSとメモリ使用量とは何ですか？あなたが少ないアイテムを持っていればそれは違っていますか？ –
私はスクロールするとフレームが48に落ちるように見えるRAMが94MBになる –
1つのセクションが削除され、FPSが同じままであることが示された。 –