javascript - React Native - 如何水平滑动卡片并给它们留出边距

Question

在下面的代码中，我尝试做两件事:

• 给每张卡片留出边际值(value):20
• 将四张卡片排成一行，让用户水平滑动

两者都不起作用，代码旨在实现这一点。

这里是 Playground ，您可以进行自己的实验:bit.ly/2V3KbKo

https://cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/

这是代码(您也可以复制/粘贴到上面的链接):

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <ScrollView style={stylesApp.cardContainer}>
        <MyCard index="514" black text="These are the news of Monday." style={stylesApp.myCard} />
        <MyCard index="514" black text="These are the news of Tuesday." style={stylesApp.myCard} />
        <MyCard index="514" black text="These are the news of Wednesday." style={stylesApp.myCard} />
        <MyCard index="514" black text="These are the news of Thursday." style={stylesApp.myCard} />
      </ScrollView>
    );
  }
}

const stylesApp = StyleSheet.create({
  cardContainer: {
    flexDirection: 'row',
    flexWrap: 'nowrap',
    overflow: 'scroll',
  },
  myCard: {
    margin: 20,
  },
});

//------

class MyCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: props.text,
        };
    }
    render() {
        return (
            <View style={stylesMyCard.container}>
                <Text style={stylesMyCard.text}>{this.state.text}</Text>
            </View>
        );
    }
}

const stylesMyCard = StyleSheet.create({
    container: {
        width: 80,
        minHeight: 40,
        padding: 10,
        backgroundColor: '#000',
        alignItems: 'center',
    },
    text: {
        color: '#fff',
        fontSize: 10,
    }
});

关于如何使这两件事正常工作的任何想法？

如果可以，请提供有效的源代码。

谢谢!

Answer 1

尝试为 ScrollView 使用 horizo​​ntal 和 showsHorizo​​ntalScrollIndicator 属性，这样之后你就可以删除 stylesApp