时间戳

首页 > 解决方案 > 有没有办法在拐角处弯曲 Flatlist？

react-native - 有没有办法在拐角处弯曲 Flatlist？

问题描述

我想开发这个视图，但我不能弯曲平面列表，我还想遮蔽除中心图像以外的图像。我尝试将边框半径赋予父视图和平面列表本身，但它对我不起作用所需视图 在此处输入图像描述

我的观点：在此处输入图像描述

这是我的代码：...

`
import React from 'react';
import {Text, View, StyleSheet, FlatList} from 'react-native';

const List = () => {
  const image= <View style={{alignItems:'center',
  justifyContent:'center',
  width:100,
  height:100,
  backgroundColor:'red',
  borderRadius:50,}}/>
  const friends = [
    {name: image, Age: '20'},
    {name: image, Age: '45'},
    {name: image, Age: '30'},
    {name: image, Age: '37'},
    {name: image, Age: '90'},
    {name: image, Age: '200'},
  ];

  return (
    <View style={styles.containerStyle}>
      <FlatList
        style={styles.listStyle}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        keyExtractor={friend => friend.Age}
        data={friends}
        renderItem={({item}) => {
          return (
            <Text style={styles.textpro}>
              {item.name}
            </Text>
          );
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
    containerStyle:{
        borderWidth:1,
        borderColor:'white',
        flex:1
        },
    listStyle:{
        borderWidth:1,
        borderColor:'red',
        borderRadius:100,
        flex:1,
    },
  op: {
    height: 10,
    width: 10,
    color: '#00ffff',
  },
});
export default List;
//App.js code
<View style={{backgroundColor:'rgb(50,117,220)',height:'30%',backgroundColor:'yellow'}}>
        <List />
</View>

`

标签： react-nativeexporeact-native-flatlist

解决方案

有人让我尝试对原生快照轮播做出反应，这就像一个魅力 idk 为什么他删除了他的评论。我感到很幸运 <3

推荐阅读