[英]React Native some of the component display out of the screen
我使用多種渲染方法渲染按鈕,但我發現很難管理它的樣式。
這是我渲染按鈕的代碼
const [abc, setAbc] = useState([
{ type: 'aa'},{ type: 'bb'},{ type: 'cc'},{ type: 'dd'},
{ type: 'ee'},{ type: 'ff'},{ type: 'gg'},{ type: 'hh'},
{ type: 'ii'},{ type: 'jj'},{ type: 'kk'},{ type: 'll'},
{ type: 'mm'},{ type: 'nn'},{ type: 'oo'},{ type: 'pp'},
{ type: 'qq'},{ type: 'rr'},{ type: 'ss'},{ type: 'tt'},
{ type: 'uu'},{ type: 'vv'},{ type: 'ww'},{ type: 'xx'},
{ type: 'yy'},{ type: 'zz'},
])
const renderedABC = abc.map(item => {
return <Button key={item.type} title={item.type}/>;
})
它顯示為
我想制作更多行並單獨顯示。 至少它填補了底部的“空白”。
您必須在使用flex:1樣式。 如果你想逐行渲染這些,那么你可以使用flexDirection : row. 默認值為“列”。 在您的情況下,您不需要使用flexDirection 。
renderedABC(){
return(
<View style={{flex: 1}}>
{abc.map(item => <Button key={item.type} title={item.type}/>)
</View>
)
};
您應該用一些<View/>
包裝按鈕並添加flex: 1
作為樣式
請試試
const renderedABC = (
<View style={{flex: 1}}>
{abc.map(item => <Button key={item.type} title={item.type}/>)
</View>
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.