react-native - React native：ScrollView 中的对齐问题

Question

大家好，我正在开发一个应用程序的主页，我使用 ScrollView 在水平和垂直方向滚动内容，但是在将文本内容放入名为“特色课程”的同时，出现了一个对齐问题，就像内容的正确高度一样与左侧不同

在此处输入图像描述

这是代码

import React, { version } from "react";
import { View, Text, StyleSheet, Dimensions, SafeAreaView } from "react-native";
import { Card, Button } from "react-native-elements";
import { ScrollView } from "react-native-gesture-handler";
import externalStyle from "../../../Stylesheet/style";
const { width, height } = Dimensions.get("screen");
function HomeScreen(props) {
return (
<SafeAreaView style={styles.container}>
  <ScrollView style={{}}>
    <Text
      style={{
        paddingLeft: 10,

        width: width,
      }}
    >
      Featured Courses
    </Text>

    <ScrollView
      showsHorizontalScrollIndicator={false}
      horizontal={true}
      style={styles.wrapper}
    >
      <Card containerStyle={styles.cardStyle}>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        />
      </Card>
      <Card containerStyle={styles.cardStyle}>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        />
      </Card>
      <Card containerStyle={styles.cardStyle}>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        />
      </Card>
    </ScrollView>
    <ScrollView
      showsHorizontalScrollIndicator={false}
      horizontal={true}
      style={styles.wrapper}
    >
      <Card containerStyle={styles.cardStyle}>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        />
      </Card>
      <Card containerStyle={styles.cardStyle}>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        />
      </Card>
      <Card containerStyle={styles.cardStyle}>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        />
      </Card>
    </ScrollView>
    {/* <View>
      <Text style={{ marginLeft: 10 }}>Featured Tutor</Text>
    </View> */}
    <ScrollView horizontal={true} style={styles.wrapper}>
      <Card containerStyle={styles.cardStyle}>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        />
      </Card>
      <Card containerStyle={styles.cardStyle}>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        />
      </Card>
      <Card containerStyle={styles.cardStyle}>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        />
      </Card>
    </ScrollView>
    <ScrollView
      showsHorizontalScrollIndicator={false}
      pagingEnabled={true}
      horizontal={true}
      style={styles.wrapper}
    >
      <Card containerStyle={styles.cardStyle}>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        />
      </Card>
      <Card containerStyle={styles.cardStyle}>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        />
      </Card>
      <Card containerStyle={styles.cardStyle}>
        <Card.Title>HELLO WORLD</Card.Title>
        <Card.Divider />
        <Text style={{ marginBottom: 10 }}>
          The idea with React Native Elements is more about component
          structure than actual design.
        </Text>
        <Button
          buttonStyle={{
            borderRadius: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0,
          }}
          title="VIEW NOW"
        />
      </Card>
    </ScrollView>
  </ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "rgba(81, 48, 214, 0.05)",
justifyContent: "center",
alignItems: "center",
},
cardStyle: {
backgroundColor: "#ffffff",
height: height * 0.3,
width: width * 0.45,
borderRadius: 7,
margin: 3,
},
wrapper: {
flex: 1,
},
});
export default HomeScreen;

主页

import React from "react";
import {
StyleSheet,
View,
Text,
TouchableOpacity,
Image,
Dimensions,
} from "react-native";
import { useSelector } from "react-redux";
import FormLogo from "../../components/FormComponent/FormLogo";
import externalStyle from "../../Stylesheet/style";
import Logout from "../login/Logout";
import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
import Tabs from "../../components/Navigation/BottomTabNav";
import DrawerNav from "../../components/Navigation/DrawerNav";
const { width, height } = Dimensions.get("window");
function Home({ navigation }) {
const state = useSelector((state) => state);
return (
<View style={externalStyle.container}>
  <View style={styles.header}>
    <View
      style={{
        flex: 1,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
      }}
     >
      <TouchableOpacity onPress={() => navigation.openDrawer()}>
        <Image
          style={{ height: 25, width: 25 }}
          source={require("../../../assets/icons/menu.png")}
        />
      </TouchableOpacity>
      <View></View>
      {/* <FormLogo /> */}
      <FontAwesome5 style={{ fontSize: 20 }} name={"bell"} solid />
    </View>

    <View style={{ flex: 1 }}>
      <Text style={styles.title}>Welcome</Text>
    </View>
  </View>

  <View style={styles.wrapper}>
    <Tabs />
  </View>
</View>
);
}

const styles = StyleSheet.create({
header: {
top: 0,
left: 0,
right: 0,
height: height * 0.2,
justifyContent: "center",
paddingTop: 50,
width: width,
paddingLeft: 25,
paddingRight: 25,
},
title: {
left: 10,
fontSize: 22,
fontWeight: "400",
fontFamily: "nunito-regular",
fontStyle: "normal",
},
wrapper: {
flex: 1,
backgroundColor: "rgba(81, 48, 214, 0.05)",
},
});
export default Home;

标签： react-nativescrollview