React Yerel Listeye çıkış alanı

Question

Yerel olarak React içinde bir liste görünümü uygulamaya çalışıyorum. Accounts bileşenini çağırdığımda her şey iyiydi, ancak NavigatorIOS içine koyduğumda Liste Görünümü ilk öğeden önce biraz boşluk bırakıyor: bkz. here ve here'u kaydırdığımda.

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, 
    }, 
}); 

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' 
    }, 
}) 

accounts.js herkes ne olup bittiğini herhangi fikri vardır mu: Burada

benim kodudur? Teşekkürler

Answer 1

Tamam, cevabı buldum, aynı soruna giren herkes için burada yayınladım.

Github here'da bir sorun yayınlanmıştır. automaticallyAdjustContentInsets={false} parametresine ListView parametresini eklemek gerekir. Sorun Çözüldü.

Answer 2

Yalnızca, bir ScrollView veya ListView with TabBarIOS'unuz olduğunda olur. automaticallyAdjustContentInsets={false}

'u eklediğinizde, üst alanı kaldırabilirsiniz. Ancak, bunun alt kısmı TabBarIOS'un altına gizleneceğinden ScrollView tamamen gösterilmeyecektir. Bunu düzeltmek için contentInset={{bottom:49}}'u ekleyin, yüksekliğini ihtiyaçlarınıza göre ayarlayın. Burada

kodunuz: iç özelliğini ayarlamanız gerekir

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

Answer 3

Eğer android..contentInset içinde bunu başarmak için çalışıyorsanız belirli iOS ise, android bu yönetmek için <ListView contentContainerStyle={styles.contentContainer}> </ListView>

Ardından stylesheets.create içinde

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

* Ben op sadece geçen insanlar için ve op desi eğer android çözeltisi ilave etmek, bir iOS çözüm istiyor fark des o iOS