Плоский список случайный круг дизайн реагировать родной - PullRequest
Новая
       5

Плоский список случайный круг дизайн реагировать родной

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

Я новичок в RN, и мне нужно реализовать что-то похожее на изображение ниже, если кто-то может поделиться идеей в этом, или любая помощь будет заметна.

enter image description here

У меня проблема с разным размером кругов и позицией.

Я пробовал с приведенным ниже кодом, и он выглядит примерно так же, единственная проблема заключается в том, что круг и интервал не очень хорошо выглядят, вот мой код: 

<FlatList
  data={this.state.moviesList}
  numColumns={3}
  keyExtractor={this._keyExtractor}
  renderItem={this.renderRowItem}
/>

Вот строка рендера: 

renderRowItem = (itemData) => {
    var RandomNumber = Math.floor(Math.random() * 50) + 70;

    return (
      <View style={styles.listSec}>
        <TouchableOpacity
          onPress={()=> {this.props.navigation.navigate('Tutorials')}}>
          <View style={{
            backgroundColor: '#f673d7',
            borderRadius: 100/2,
            justifyContent: 'center',
            alignSelf: 'center',
            height: RandomNumber + itemData.item.title.length,
            width: RandomNumber + itemData.item.title.length,
            //paddingVertical: 10,
            //paddingHorizontal: 10
          }}>
            <Text
              style={{color: '#fff',
                alignSelf:'center',
                fontSize: 18,
                fontWeight: '500',
                fontSize: RandomNumber/5
              }}>
              {itemData.item.title}</Text>
          </View>
        </TouchableOpacity>
      </View>
    )
  }
...