React Native ScrollView Horizo​​ntal 不工作

Question

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

我试过 <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> 放错了位置？

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

Answer 1

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

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

注意：scroll view是滚动区域在scroll的开始和结束标签之间。