PagerView 未拉伸以适合其子级

Question

我正在与 Expo 合作开发一个 React Native 项目，其中我使用

react-native-pager-view

组件 创建滑块。但是，我面临一个问题，即父容器 (

subContainer

) 无法拉伸以适合其子容器的大小。

这是我的代码的简化版本：

import PagerView from 'react-native-pager-view'
import { Image, Text, View, StyleSheet } from 'react-native'
import { CSS_BORDER, CSS_SPACING, GLOBAL_STYLES } from '@/ui/styles/Vars'

function ArtistPreviewSlidingCard() {
  const viewModel = {
    name: 'John Doe',
    profession: 'Photographer',
    imageUrl: 'https://picsum.photos/200',
    description:
      'John Doe is a photographer based in London. He is known for his work in fashion photography.',
    cta: 'View profile',
  }

  return (
    <View style={cstyles.card}>
      <View style={cstyles.textContainer}>
        <Text style={cstyles.name}>{viewModel.name.toUpperCase()}</Text>
        <Text style={cstyles.profession}>
          {viewModel.profession.toUpperCase()}
        </Text>
        <Text style={cstyles.description}>{viewModel.description}</Text>
        <Text style={cstyles.cta}>{viewModel.cta}</Text>
      </View>
      <Image source={{ uri: viewModel.imageUrl }} style={cstyles.image} />
    </View>
  )
}

const cstyles = StyleSheet.create({
  card: {
    flex: 1,
    display: 'flex',
    flexDirection: 'row',
    padding: 16,
    height: 200,
    borderWidth: 1,
    borderColor: 'grey',
    justifyContent: 'flex-start',
    borderRadius: CSS_BORDER.radius.roundedMedium,
  },
  textContainer: {
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    width: '50%',
    backgroundColor: 'white',
  },
  image: {
    width: '50%',
  },
  name: {
    ...GLOBAL_STYLES.highlightText,
    fontWeight: 'bold',
  },
  profession: {
    ...GLOBAL_STYLES.highlightText,
    fontSize: 14,
    fontWeight: 'bold',
  },
  description: {
    marginTop: CSS_SPACING.small,
    fontSize: 14,
    color: 'black',
  },

  cta: {
    marginTop: CSS_SPACING.small,
    textDecorationLine: 'underline',
    fontWeight: 'bold',
  },
})

export function ArtistPreviewSlider() {
  return (
    <>
      <View style={styles.container}>
        <PagerView initialPage={0} style={styles.subContainer}>
          <ArtistPreviewSlidingCard key={1} />
          <ArtistPreviewSlidingCard key={2} />
          <ArtistPreviewSlidingCard key={3} />
        </PagerView>
      </View>
      <ArtistPreviewSlidingCard />
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  subContainer: {
    flex: 1,

    height: 100,
    alignItems: 'stretch',
    borderRadius: CSS_BORDER.radius.roundedMedium,
    padding: 16,
    margin: 16,

    borderWidth: 1,
    borderColor: 'blue',
  },
})

[]

我尝试过的：

1. 确保所有组件都有

   flex: 1

   。
2. 从

   flex: 1

   样式中删除了

   subContainer

   ，并将其高度设置为

   auto

   。
3. 已验证

   PagerView

   组件具有

   flex: 1

   。

如果我将子容器的高度设置为 100，我可以看到卡片，但它会被截断，直到我提供足够的值。

尽管进行了这些更改，

subContainer

仍然无法拉伸以适合其子级的确切大小。如何使

subContainer

拉伸以适合其子项？任何帮助将不胜感激。

Answer 1

你的固定高度是100。看一下。如果你想防止高度大于，你应该使用 maxHeight

  subContainer: {
    flex: 1,

    height: 100,
    alignItems: 'stretch',
    borderRadius: CSS_BORDER.radius.roundedMedium,
    padding: 16,
    margin: 16,

    borderWidth: 1,
    borderColor: 'blue',
  },