react-native - 为不工作的动态元素 react native 两列布局

Question

多个带有图像的 View 元素需要以两列布局显示。

我正在使用以下代码(基本上，获取窗口的尺寸(x)并设置 View 宽度 = x/2)。

父容器是 flex: row .

但这似乎不起作用。我连续只得到一个图像，而不是图像中显示的两个图像。我做错了什么？

const window = Dimensions.get('window');
const imageWidth = (window.width/3)+30;
const imageHeight = window.width/3;
export default class Brochures extends Component {
  render() {
    const brochuresView = brochuresData.map( Brochure );
    return (
      <ScrollView style={styles.container}>
        {brochuresView}
      </ScrollView>
    );
  }
}

const Brochure = ( data ) => {
  const {child, image} = styles;
  return (
    <View key={data.id} style={child}>
      <Image
        style={image}
        source={{uri: data.url}}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  child: {
    width: window.width/2,
    alignItems: 'center',
    height: imageHeight+5,
    marginTop: 10
  },
  image: {
    width: imageWidth,
    height: imageHeight
  }
});

Answer 1

ScrollView 需要一个 contentContainerStyle Prop 与普通 style将描述样式的 Prop 。

从文档:

These styles will be applied to the scroll view content container which wraps all of the child views. Example:

return ( <ScrollView contentContainerStyle={styles.contentContainer}>
</ScrollView> ); ... const styles = StyleSheet.create({
contentContainer: { paddingVertical: 20 } });

因此，基本上您需要对代码进行的唯一更改是:

<ScrollView contentContainerStyle={styles.container}>

与这个:

<ScrollView style={styles.container}>