我有上面的 ScrollViews（以黃色突出顯示），每個視圖最多 6 個專案。當我嘗試將其滾動到最后時，無法 100% 滾動。最后一個專案的一部分將不會查看。請參閱以下螢屏截圖。
突出顯示的紅色區域無法查看或滾動。
以下是組件，
const Item = ({title, data}: any) => (
<View style={styles.itemRoot}>
<View style={styles.item}>
<View style={styles.itemLeft}>
{/* left inner container */}
</View>
<View style={styles.itemRightRoot}>
<View style={styles.itemRightTitle}>
<Text>TITLE</Text>
</View>
<View style={styles.itemRight}>
{/* area which render each ScrollViews */}
{title.items.map((item: any, index: number) => {
return (
<ScrollView horizontal>
{item.map((child, index) => {
return (
<View
key={index}
style={{
width: isTablet()
? (Dimensions.get('screen').width - 80) / 6
: (Dimensions.get('screen').width - 64) / 3,
marginRight: 8,
marginBottom: 8,
}}>
<SectionInnerItem />
</View>
);
})}
</ScrollView>
);
})}
</View>
</View>
</View>
{/* separator */}
<View
style={{
height: 2,
marginTop: 24,
marginBottom: 24,
backgroundColor: '#36363D',
width: Dimensions.get('screen').width - 64,
}}
/>
</View>
);
這是樣式表，
const styles = StyleSheet.create({
itemRoot: {
marginLeft: 24,
marginRight: 16,
},
item: {
display: 'flex',
flexDirection: 'row',
},
itemRightRoot: {
display: 'flex',
flexDirection: 'column',
},
itemRightTitle: {
marginLeft: 24,
marginRight: 16,
},
itemRight: {
marginLeft: 24,
marginRight: 16,
paddingTop: 16,
paddingBottom: 16,
},
itemLeft: {},
});
我在這里做錯了什么？另外，有沒有一種方法可以只使用一個 ScrollView 但每行最多有 6 個專案，下一行的其余專案最多？
uj5u.com熱心網友回復：
請給flex: 1的itemRightRoot。問題是，itemRightRoot不知道螢屏左側正方形與螢屏其余部分的寬度。
itemRightRoot: {
flex: 1,
display: 'flex',
flexDirection: 'column',
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/392935.html
標籤：反应原生
上一篇：當我渲染頁面時，頁面變得無回應