ScrollView React Native 水平不工作

Question

我正在使用 RN 0.59.8 开发应用程序。我正在尝试使用 ScrollView 水平创建可滚动视图。这是我的代码的基础（抱歉我不能分享更多细节）：

import React, { Component, Fragment } from 'react';
import {
  ScrollView,
} from 'react-native';
import {
  Container,
  Content,
} from 'native-base';
import { Grid, Row } from 'react-native-easy-grid';

import ChildComponent from './ChildComponent';

class MyComponent extends Component {
  render() {
    const {
      data,
    } = this.props;

    return (
      <Container>
        <Content>
          <Grid>
            <Row>
              <ScrollView
                horizontal
                contentContainerStyle={{
                  flex: 1, flexGrow: 1, flexDirection: 'row',
                }}
              >
                {
                  data.map((item, index) => {
                    const order = index;

                    return (
                      <Fragment key={order}>
                        {
                          <ChildComponent />
                        }
                      </Fragment>
                    );
                  })
                }
              </ScrollView>
            </Row>
          </Grid>
        </Content>
      </Container>
    );
  }
}

export default MyComponent;

当前行为：

如果contentContainerStyle={{ flex: 1, flexGrow: 1, flexDirection: 'row' }}，第二个数据不出现
如果contentContainerStyle={{ flex: 1, flexGrow: 1, flexDirection: 'column' }}，第二条数据竖排出现
如果contentContainerStyle={{ flexDirection: 'row' }}，第二个数据不出现且内容比屏幕宽

我的反对意见是：

我想让它水平滚动
每个数据都适合屏幕宽度

任何帮助都会很有帮助。谢谢！！！

Answer 1

直接来自 React Native 文档，要使滚动视图的子级水平排列在一行中而不是垂直排列在一列中，您唯一需要使用的道具是 horizontal。

<ScrollView horizontal>
  <Child/>
</ScrollView>

我做了一个小吃给你看，@abranhe/Whosebug-56721203:

要使其适合屏幕宽度，请使用您的组件并：

import { Dimensions } from 'react-native';

Dimensions.get('width').width

演示源码：

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

export default class App extends Component {
  renderCity(city) {
    return (
      <View style={styles.cardContainer}>
        <View style={styles.card}>
          <Image source={{ uri: city.img }} style={styles.image} />
          <Text style={styles.title}>{city.title}</Text>
        </View>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView horizontal>
          {data.map(city => {
            return this.renderCity(city);
          })}
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
    marginTop: 30,
  },
  title: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  image: {
    width: 200,
    height: 200,
    borderRadius: 10,
    marginTop: 10,
  },
  cardContainer: {
    justifyContent: 'center',
  },
  card: {
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 20,
    borderRadius: 10,
    width: 220,
  },
});

Keep in mind

native-base 中的某些 UI 组件具有绝对值，您可以更改您的主题变量，使它们适合您的需要。

如果您不想显示滚动指示器，您可以设置 false ScrollView's showsHorizontalScrollIndicator 属性。

ScrollView React Native 水平不工作

ScrollView React Native Horizontal Not Working

scrollview

horizontalscrollview

react-native