平面列表随机圆设计反应原生

Question

我是 RN 的新手，如果有人可以对此分享想法或任何帮助，我需要实现如下图所示的内容。

我在不同大小的圆圈和那里的位置上遇到问题。

我尝试了下面的代码，它看起来很相似，唯一的问题是圆圈和间距看起来不太好，这是我的代码：

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