Question

在下面的代码中，我试图做两件事：

给每张卡的保证金为：20
将四张卡仅排成一排，让用户水平滑动它们

两种方法都无法正常工作，并且代码旨在做到这一点。

这里是操场，所以您可以做自己的实验：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

尝试将HorizonView的horizontal和showHorizontalScrollIndicator道具用于ScrollView，以便在此之后可以删除stylesApp

React Native-如何水平滑动卡并留有余量

1 个答案: