Блог

Я пытаюсь отобразить N Flatlist компонентов и сделать так, чтобы они идеально вписывались в остальную часть экрана без необходимости прокрутки. Вот как в настоящее время выглядит мое приложение.

У меня есть мои Flatlist дети, которые являются моими вариантами использования, представленными под заголовком моего интеллектуального помощника. Мне нужны flatlist компоненты, которые идеально подходят для текущего экрана пользователя для N вариантов использования. В этом случае остается много пустого пространства, в которое я хочу, чтобы N детей поместилось равномерно.

Вот мое App.js досье

 return (  lt;View style = {styles.container}gt;  lt;Header appName='Intelligent Assistant'/gt;  lt;View gt;   lt;FlatList   data = {useCases}   renderItem = {({item}) =gt; lt;Usecase useCase = {item} /gt;}  /gt;  lt;/Viewgt;  lt;/Viewgt;  ); }  const styles = StyleSheet.create({  container: {  flex : 1 ,  paddingTop : 60,  }, });  

Вот мой Usecase.js файл

 const Usecase = ({useCase}) =gt; {  return (  lt;TouchableOpacity style = {styles.useCase}gt;  lt;View style = {styles.useCaseView}gt;  lt;Text style = {styles.useCaseText}gt;{useCase.description}lt;/Textgt;  lt;/Viewgt;  lt;/TouchableOpacitygt;  ) }  const styles = StyleSheet.create({  useCase : {  padding : 15,  backgroundColor : '#f8f8f8',  borderBottomWidth : 1,  borderColor : '#eee',  },  useCaseView : {  flexDirection : 'column',  alignItems:'center',  justifyContent:'space-evenly',  }, });  

 import {Dimensions} from ‘react-native’; const deviceheight = Dimensions.get('window').height;  const Usecase = ({useCase}) =gt; {  return (  lt;TouchableOpacity style = {[styles.useCase,{height: (deviceheight - YOUR_HEADER_BAR_HEIGHT)/useCases.length}]}gt;  lt;View style = {styles.useCaseView}gt;  lt;Text style = {styles.useCaseText}gt;{useCase.description}lt;/Textgt;  lt;/Viewgt;  lt;/TouchableOpacitygt;  ) }   

Поскольку вы используете {borderBottomWidth : 1} , вам придется вычесть количество строк при расчете высоты.