有没有办法弯弯曲曲平面清单?

时间:2020-05-17 16:51:31

标签: react-native expo react-native-flatlist

我想开发这种视图,但是我不能弯曲平面列表,并且我还想对除中心中心之外的其他图像进行阴影处理。我尝试将边界半径赋予父视图和平面列表本身,但事实并非如此为我工作 所需视图 enter image description here

我的观点:enter image description here

这是我的代码: ...

`
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>

`

1 个答案:

答案 0 :(得分:0)

有人要求我尝试对本机快速旋转木马做出反应,这就像魅力idk一样为何删除了他的评论。我感到很幸运<3