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

, и этопоказывать как

Я хотел бы сделать больше строк и отображать их отдельно. По крайней мере, он заполнит «пробел» внизу.

Answer 1

Вы должны визуализировать компонент в со стилем flex: 1 . Если вы хотите визуализировать эти строки построчно, вы можете использовать flexDirection : row. значение по умолчанию - «столбец». В вашем случае вам не нужно использовать flexDirection .

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

Answer 2

Вы должны обернуть кнопки немного <View/> и добавить flex: 1 как стиль

Пожалуйста, попробуйте

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