javascript - React Native 部分组件显示出屏幕

Question

我使用多种渲染方法渲染按钮，但我发现很难管理它的样式。

这是我渲染按钮的代码

 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}/>;
  })

它显示像

我想制作更多行并单独显示。至少它填补了底部的“空白”。

标签： javascriptreact-nativestyling

Answer 1

您必须在使用flex:1样式。如果你想逐行渲染这些，那么你可以使用flexDirection : row. 默认值为“列”。在您的情况下，您不需要使用flexDirection。

renderedABC(){
   return(
       <View style={{flex: 1}}>
           {abc.map(item => <Button key={item.type} title={item.type}/>)
       </View>
   )
};