平面列表随机圈设计反应本机

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