Показывать только первые два элемента массива в списке разделов - PullRequest
Новая
       37

Показывать только первые два элемента массива в списке разделов

0 голосов
/ 26 октября 2018

Привет, ребята, я использую раздел Section of response native, в котором я рендую фрукты с его деталями. Я хочу показать только два раздела в первый раз, когда он Render и я использую initialNumToRender={1}, но это не поможет мне, как я могу это сделать

это мой массив данных 

    var A = ['Apple', 'Apricot', 'Avocado'] ;
    var B = ['A banana is an edible fruit – botanically a berry.The fruit is variable in size, color, and firmness, but is usually elongated and curved, with soft flesh rich in starch covered with a rind, which may be green, yellow, red, purple, or brown when ripe. The fruits grow in clusters hanging from the top of the plant. Almost all modern edible seedless (parthenocarp) bananas come from two wild species – Musa acuminata and Musa balbisiana. The scientific names of most cultivated bananas are Musa acuminata, Musa balbisiana, and Musa × paradisiaca for the hybrid Musa acuminata × M. balbisiana, depending on their genomic constitution. The old scientific name Musa sapientum is no longer used. ', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry'] ;
    var C = ['Cherry', 'Coconut'] ;

это мой список разделов: => 

<SectionList
        sections={[
          { title: 'Fruits Name From A', data: A },
          { title: 'Fruits Name From b', data: B },
          { title: 'Fruits Name From c', data: B },
        ]}
        initialNumToRender={1}
        renderSectionHeader={ ({section}) => <Text style=                                {styles.SectionHeaderStyle}>
    { section.title } </Text> }
        renderItem={ ({item}) =>
        <View>
       <TouchableOpacity onPress={this.showtext}><Text style={styles.SectionListItemStyle}  //onPress={this.GetSectionListItem.bind(this, item)}

       numberOfLines={this.state.showtext ? 4 : 0}
       >
       { item }

      </Text>
    </TouchableOpacity>
     </View>
     }

        keyExtractor={ (item, index) => index }

      />

1 Ответ

0 голосов
/ 27 октября 2018

Вы можете установить секции в виде массива, а затем вызвать slice () во время метода рендеринга, чтобы ограничить массив нужным вам числом.Это может выглядеть так: 

constructor(props){
    //...
    this.state = { sliceNumber : 1};
}

Затем в SectionList установите секции как массив, который вы определили где-то еще.sections = {sectionsArray.slice(0, this.state.sliceNumber)}.Когда вы хотите иметь больше разделов, вы устанавливаете состояние на большее число с помощью this.setState({sliceNumber : 2});, и пользовательский интерфейс будет отображаться с различным количеством разделов.

...