你懂的

<View

          style={{

            flexDirection: "row",

            justifyContent: "space-around",

            backgroundColor: "#00A9FF"

          }}

        >

          <FlatList

            horizontal={true}

            showsHorizontalScrollIndicator={false}

            style={{ width: 100, height: 100 }}

            data={this.state.arr}

            renderItem={({ item }) => (

              <View

                style={{

                  alignItems: "center",

                  margin: 5,

                  marginLeft: 20,

                  marginRight: 20,

                  flexDirection: "row",

                  justifyContent: "space-around",

                  backgroundColor: "#00A9FF"

                }}

              >

                <Text>{item}</Text>

              </View>

            )}

          />

        </View>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • WX
    export default class Demo3 extends Component { render() ...
    糖豆萌萌哒阅读 520评论 0赞 0
  • React-Native 之 项目实战(四)
    前言 本文有配套视频，可以酌情观看。 文中内容因各人理解不同，可能会有所偏差，欢迎朋友们联系我。 文中所有内容仅供...
    珍此良辰阅读 1,168评论 0赞 6
  • React-Native 之 FlexBox介绍与使用
    前言 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人...
    珍此良辰阅读 4,560评论 2赞 19
  • 使用Flexbox布局
    React Native中使用flexbox规则来制定某个组件的子元素的布局。 使用flexDirection、a...
    胡伟红阅读 177评论 0赞 0
  • React-Native之Flex布局
    在React-Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上...
    Coder_Answer阅读 1,554评论 1赞 2