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/stackoverflow-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,
  },
});

记住

某些来自 native-base 的UI组件具有绝对值，您可以更改主题变量以使其适合您的需求。

如果您不想显示滚动指示器，可以将ScrollView's showsHorizontalScrollIndicator道具设置为false。

ScrollView React Native水平无法正常工作

1 个答案: