Автоцентр FlatList react native

#react-native #scroll #center #react-native-flatlist #flatlist

Вопрос:

Я пишу этот код:

 lt;View style={styles.container}gt;  lt;FlatList  data={data}  style={styles.menu}  renderItem={({item, index})=gt;  lt;TouchableOpacitygt;  lt;View style={styles.menuItem}gt;  lt;Text style={item.active ? styles.menuItemTextActive : {}}gt;{item.title}lt;/Textgt;  lt;/Viewgt;  lt;/TouchableOpacitygt;  }  showsHorizontalScrollIndicator={false}  horizontal  /gt; lt;/Viewgt;  const styles = StyleSheet.create({  container: {  flex: 1,  },  menu:{  width: "100%",  paddingVertical: 5,  flexGrow: 0,  },  menuItem:{  paddingHorizontal: 10,  paddingVertical: 5,  borderWidth: 1,  borderColor: '#CCC',  borderRadius: 10,  marginHorizontal: 3,  }, });

Но элементы автоматически прокручиваются в центр, как на этой картинке:

Я этого не хочу. Я хочу, чтобы все они обычно были такими же, как справа или слева. Как на картинке:

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

Это мои данные, если это поможет:

 const [data, setData] = useState([  {  title: 'پرفروش‌ترین‌ها',  order: '`buy` DESC',  active: true  },  {  title: 'پرسودترین‌ها',  order: '(`price` - `primary_price`) DESC',  where: '`primary_price` gt; 0'  },  {  title: 'کم‌فروش‌ترین‌ها',  order: '`buy` ASC',  },  {  title: 'کم‌ترین موجودی',  order: '`qty`',  where: '`qty` gt; -1'  },  {  title: 'کم‌سودترین‌ها',  order: '(`price` - `primary_price`) ASC',  where: '`primary_price` gt; 0'  },  {  title: 'بیش‌ترین موجودی',  order: '`qty` DESC',  where: "`qty` gt; -1 AND `qty` != ''"  },  {  title: 'پرسودترین فاکتورها',  order: '`profit` DESC',  where: '`profit` gt; 0',  type: 'invoice'  },  {  title: 'پرتعدادترین فاکتورها',  order: '`count` DESC',  type: 'invoice'  },  {  title: 'گران‌ترین‌‌ها',  order: '`price` DESC',  },  {  title: 'ارزان‌ترین‌ها',  order: '`price` ASC',  },  {  title: 'بدون‌نام‌ها',  where: "`name` = ''",    },  {  title: 'بدون‌موجودی‌ها',  order: '`qty` DESC',  where: "`qty` lt; 1",    },  {  title: 'بدون‌قیمت‌خریدها',  where: "`primary_price` lt; 1",    },  ]);

1. Я запустил ваш код, и он начинается слева, а не в центре. Добавляются ли данные? Где этот набор?

2. да, я использую состояние для данных

3. Можете ли вы показать весь код, используемый для установки данных?

4. @SajadSpeed добавьте inverted={true} в качестве реквизита в плоский список и проверьте.

5. не работает….

Ответ №1:

Вы можете использовать реквизит contentContainerStyle плоского списка и выровнять элементы в center.it должно выглядеть примерно так.

 contentContainerStyle={{  alignItems: 'center',  }}

Ответ №2:

 export const MyStyledList = styled(FlatList).attrs({  contentContainerStyle: {  flexGrow: 1, justifyContent: 'center'  }, })``;

вместо рендеринга плоского списка MyStyledList