当将滚动方向设置为水平时,我的ScrollView的行为不符合预期。只要我没有将其设置为true,一切都是正确的,但是如果我未将其设置为水平,则不会得到预期的布局(我也希望它水平滚动)
这是一个代码:
const AddCustomCategoryView = ({ phrases, categoryItems, onPress }) => {
const chunkedPhrases = chunkArray(phrases || [], 4);
const length = chunkedPhrases.length;
const dl = (length % 2 === 0 || portrait) ? length : (length + 1);
const scrollWidth = calculateScrollWidth(length);
const sectionWidth = 100 / dl;
return (
<View style={{ flex: 1 }}>
<ScrollView pagingEnabled horizontal style={{ width: scrollWidth.toString().concat('%') }} contentContainerStyle={{ height: '50%', width: '100%', flexDirection: 'row' }}>
{chunkedPhrases.map((phraseCollection, index) =>
<View key={`view${index}`} style={{ width: sectionWidth.toString().concat('%'), justifyContent: 'flex-start', flexWrap: 'wrap' }} >
<TouchableHighlight style={styles.bigButtonStyle}>
<AddIconButton text={'Add Icon'} onPress={() => AddIconOnPress()} />
</TouchableHighlight>
{categoryItems.map((item, index2) => (
<View style={styles.bigButtonStyle}>
<CategoryBoxView
onPressItem={this._onPressItem}
text={item.text}/>
</View>
))}
</View>
)}
</ScrollView>
</View>
);
};
请记住,在任何ScrollView属性上设置宽度都没有区别。