React Native一些组件在屏幕外显示

2024-04-26 • 问答

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

这是我渲染按钮的代码

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

它显示为

我想增加一行并单独显示。至少它填补了“空白” 在底部。

您应该用一些<View/>包装按钮，并添加flex: 1作为样式

请尝试

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

您必须使用 flex：1 样式以渲染组件。如果要逐行渲染，则可以使用 flexDirection ：行。默认值为“ column”。就您而言，您无需使用 flexDirection 。

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

React Native一些组件在屏幕外显示

q345268962 回答：React Native一些组件在屏幕外显示

大家都在问