Рендеринг строк в компоненте ListView React Native

Question

У меня нет проблем с созданием ListView, но я считаю, что если я хочу отобразить это ListView внутри View, он разбивается и прокрутка больше не работает.

Я понимаю, что два элемента не могут быть рядом друг с другом, не обернувшись в родительский View, но это сломает мой ListView. Мой ListView отображается следующим образом в составе компонента React с именем Main.

renderMeeting(meeting) { 
    return (
    <TouchableHighlight> 
     <View> 
     <View style={styles.container}> 
      <View style={styles.imaging}> 
       <Image source={{uri: meeting.Picture}} style={styles.thumbnail} /> 
      </View> 
      <View style={styles.rightContainer}> 
       <Text style={styles.meetingTime}> 
        {meeting.Time} 
       </Text> 
      <View style={styles.firstRow}> 
       <Text style={styles.meetingName}> 
        {meeting.Name} 
       </Text> 
       <Text style={styles.Title}> 
        {meeting.Title} 
       </Text> 
       <Text style={styles.Company}> 
        @ {meeting.Company} 
       </Text> 
      </View> 
      <View> 
       <Text style={styles.meetingDescription}> 
        {meeting.Description} 
       </Text> 
      </View> 
      </View> 
     </View> 
     <View style={styles.borderLine} /> 
     </View> 
    </TouchableHighlight> 
); 
    } 

    render() { 
    return(
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this.renderMeeting.bind(this)} 
     style={styles.listView} /> 
    ); 
    } 

}; 

Когда мой render метод index.ios.js просто возвращает этот Main компонент, он работает просто отлично:

render() { 
    return (
    <Main> 
); 
} 

Однако, если я пытаюсь обернуть Main в View, он не работает:

render() { 
    return (
    <View> 
     <Main> 
    </View> 
); 
} 

Если я хочу, чтобы что-либо плавало над ListView или если я хочу иметь i t только половина страницы. Кажется, я не могу заставить ее работать, пока этот компонент нигде не является родительским представлением.

Answer 1

Возможно, что происходит, внешний вид заканчивается 0 высотой. Вы должны уметь исправлять вещи, придавая ему стиль flex1.

render() { 
    return (
    <View style={styles.container}> 
    <Main> 
    </View> 
); 
} 

Использование flex: 1 как стиль, кажется, сделать трюк для видов контейнеров, как это так, это может выглядеть примерно так:

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