React Native ScrollView Horizontal 不起作用答案

【问题标题】：React Native ScrollView Horizontal not workingReact Native ScrollView Horizontal 不起作用
【发布时间】：2021-01-11 02:34:56
【问题描述】：

我是原生反应新手，我正在尝试在我的屏幕上放置一个水平滚动视图。

我尝试输入<ScrollView horizontal={true}>，但它根本不起作用，我希望蓝色框可滚动。

这里'我的屏幕图像：

这是我的组件代码：

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

export default function Body() {
  return (
    <View>
      <View style={styles.jadwal}>
        <ScrollView horizontal={true}>
          <View style={styles.box}>
            <Text style={styles.title}>Math</Text>
            <View style={styles.wrap}>
              <View style={styles.alert}>
                <Text style={styles.pr}>3 Homework</Text>
                <Image
                  style={styles.img}
                  source={require('../assets/math.png')}
                />
              </View>
            </View>
          </View>

          <View style={styles.box}>
            <Text style={styles.title}>Biology</Text>
            <View style={styles.wrap}>
              <View style={styles.alert}>
                <Text style={styles.pr}>10 Homework</Text>
                <Image
                  style={styles.img}
                  source={require('../assets/math.png')}
                />
              </View>
            </View>
          </View>
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  jadwal: {
    marginLeft: 10,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    position: 'absolute',
  },
  box: {
    height: 100,
    width: 230,
    borderRadius: 10,
    backgroundColor: '#327fe3',
    marginLeft: 10,
  },
  alert: {
    height: 20,
    marginLeft: 15,
    width: 80,
    borderRadius: 10,
    backgroundColor: '#7CD5FF',
  },
  title: {
    marginTop: 20,
    marginLeft: 20,
    fontFamily: 'MontserratSemiBold',
    fontSize: 15,
    color: '#fff',
  },
  pr: {
    marginLeft: 14,
    fontSize: 8,
    color: '#fff',
    marginTop: 4,
    justifyContent: 'flex-start',
    fontFamily: 'MontserratLight',
  },
  wrap: {
    marginTop: 5,
  },
  img: {
    height: 50,
    width: 50,
    marginLeft: 140,
    marginTop: -35,
  },
});

有什么问题吗？我把<ScrollView> 放在了错误的位置吗？

感谢您阅读本文，并为我的英语不好感到抱歉。

【问题讨论】：

您的代码运行良好。我已经在我的笔记本电脑上进行了测试。
“我的课程”部分无法水平滚动，您确定可以吗？

标签： javascript android react-native mobile

【解决方案1】：

字体系列有一个错误，我的笔记本电脑没有安装这个字体。

总体而言，您的滚动视图工作正常。

注意：滚动视图是滚动区域在滚动的开始和结束标记之间。

【讨论】：