Блог

Я новичок в react native, и я пытаюсь поместить горизонтальный scrollview на свой экран.

Я пытался поставить <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> в неправильное положение?

Спасибо, что прочитали это, и извините за мой плохой английский.

Есть одна ошибка, связанная с семейством шрифтов, этот шрифт не установлен на моем ноутбуке.

В целом ваш вид прокрутки работает нормально.

Вид прокрутки — это область прокрутки, расположенная между открывающим и закрывающим тегом прокрутки.