web-dev-qa-db-ja.com

Reactスペースを残すネイティブリストビュー

リストビューをReact Nativeで実装しようとしています。コンポーネントAccountsを呼び出すだけで問題はありませんでしたが、NavigatorIOSに配置したため、リストビューは最初のアイテムの前にスペースを残しています。 ： here およびスクロールする場合 here を参照してください。

ここに私のコードがあります：

index.ios.js

var RemoteX1 = React.createClass({

  render: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: 'Accounts',
          component: Accounts,
        }}/>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

accounts.js

var people = [
  {
    title: "Papa",
    favouriteChannels: []
  },
  {
    title: "Maman",
    favouriteChannels: []
  },
  {
    title: "Kids",
    favouriteChannels: []
  },
  {
    title: "Invité",
    favouriteChannels: []
  }
];

var Accounts = React.createClass({
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(people),
    }
  },
  renderRow: function(person) {
    return (
      <TouchableHighlight onPress={this.onPressRow}>
        <Text style={styles.account}>{person.title}</Text>
      </TouchableHighlight>
    );
  },
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.panel}>
          <Text style={styles.icon}>&#xF0C6;</Text>
          <Text style={styles.welcome}>BIENVENUE</Text>
          <ListView 
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            style={styles.listView} />
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  panel: {
    backgroundColor: '#67F072',
    alignItems: 'center',
    justifyContent: 'center',
    paddingLeft: 50,
    paddingRight: 50,
  },
  icon: {
    color: '#67B7F0',
    fontFamily: 'CanalDemiRomainG7',
    fontSize: 40
  },
  welcome: {
    color: '#67B7F0',
    fontFamily: 'CanalDemiRomainG7'
  },
  account: {
    color: '#000000',
    height: 30,
    alignSelf: 'center',
    fontFamily: 'CanalDemiRomainG7'
  },
})

誰が何が起こっているのか知っていますか？ありがとう

javascriptioslistviewreact-native
40
ilansas

わかりましたので、答えを見つけました。同じ問題に遭遇した人のためにここに投稿します。

Github here に問題が投稿されました。 ListViewにパラメーターautomaticallyAdjustContentInsets={false}を追加する必要があります。問題が解決しました。

87
ilansas

これは、TabBarIOSを備えたScrollViewまたはListViewがある場合にのみ発生します。 automaticallyAdjustContentInsets={false}を入力すると、上部の余分なスペースを削除できます

ただし、ScrollViewの下部はTabBarIOSの下に隠れているため、ScrollViewは完全には表示されません。これを修正するには、contentInset={{bottom:49}}を追加し、必要に応じて高さを調整します。

コードは次のとおりです。

<ListView
  contentInset={{bottom:49}}
  automaticallyAdjustContentInsets={false}
>
32
drikoda

Androidでこれを実現しようとしている場合、contentInsetはiOS固有であり、これをAndroid=で管理するには<ListView contentContainerStyle={styles.contentContainer}> </ListView>内のプロパティを設定する必要があります

次に、stylesheets.createで

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

* opはiOSのソリューションを求めていることを理解しています。通過する人にAndroidソリューションを追加し、opがiOSにうんざりしていると判断した場合

8
TomTom