如何在React Native中使ScrollView水平

xwmevbvl  于 2023-05-23  发布在  React
关注(0)|答案(8)|浏览(237)

我正在使用ScrollView滚动列表,如何使其水平显示为垂直
我也试着用不同的观点来 Package ,但没有效果
例如:

<View>
<ScrollView>
.
.
.
</ScrollView>
<View>
1wnzp6jl

1wnzp6jl1#

你需要定义你想要在ScrollView中激活水平:

<View>
  <ScrollView
  horizontal={true}
  >
  .
  .
  .
  </ScrollView>
</View>
ssgvzors

ssgvzors2#

horizontal={true} prop传递给ScrollView组件。

默认情况下,ScrollView垂直布局。为了水平滚动内容,您只需向ScrollView组件传递horizontal={true}属性,如下所示:

<ScrollView horizontal={true}>

  <Text>Child 1</Text>
  <Text>Child 2</Text>
  <Text>Child 3</Text>

</ScrollView>

上面的代码将水平地而不是垂直地布置Child 1、Child 2和Child 3。
你可以阅读更多关于React Native的官方文档。

ecfsfe2w

ecfsfe2w3#

您可能需要设置 prop horizontalshowsHorizontalScrollIndicator

<ScrollView
  horizontal={true}
  showsHorizontalScrollIndicator={false}
  pagingEnabled={true}>
  {/* React Component Goes here */}
</ScrollView>
qacovj5a

qacovj5a4#

<ScrollView horizontal />

就足够了
你不需要写:

<ScrollView horizontal={true} />

因为当你传入prop的时候它已经是真的了。

bybem2ql

bybem2ql5#

只需将horizontal添加到<ScrollView>

stszievb

stszievb6#

<View style={{flexDirection: 'row'}}>
        <ScrollView
          horizontal={true}
          showsHorizontalScrollIndicator={false}>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
          <Text>asdasdasd</Text>
        </ScrollView>
      </View>
9o685dep

9o685dep7#

它为我工作,只需要在scrollView中添加horizontal={true},如

<ScrollView horizontal={true}>    //This is horizonatl

     If you want Vertical scroll 
    <ScrollView>                       //vertical scroll
    <Text>Am vertical scroll </Text> 
    </ScrollView>
4si2a6ki

4si2a6ki8#

水平滚动视图代码只是将horizontal={true}放在ScrollView中

相关问题