В React Native можно создать две горизонтальные прокрутки, одна из которых вложена в другую?

Как можно сделать элемент ScrollView прокручиваемым в данном коде?
  • 8 ноября 2023 г. 10:58
Ответы на вопрос 2
Да, в React Native вы можете создать две горизонтальные прокрутки, одну вложенную в другую. 

Чтобы сделать элемент ScrollView прокручиваемым, вам нужно установить ему стиль `flex: 1`. Ниже приведен пример кода:

```jsx
import React from 'react';
import { View, ScrollView, Text } from 'react-native';

const MyComponent = () => {
  return (
    <View style={{ flex: 1 }}>
      <ScrollView horizontal>
        <ScrollView>
          <View style={{ width: 500 }}>
            <Text>Some content</Text>
          </View>
        </ScrollView>
      </ScrollView>
    </View>
  );
};

export default MyComponent;
```

В этом примере оба ScrollView имеют горизонтальную прокрутку, а внутренний ScrollView является прокручиваемым благодаря стилю `flex: 1` родительского элемента.
```
import React from 'react';
import { FlatList, View, Text, ScrollView } from 'react-native';

const test = [
 {id: 1, name: '1'},
 {id: 2, name: '2'},
 {id: 3, name: '3'},
 {id: 4, name: '4'},
];

// Создаем компонент App
const App = () => {
 return (
    // Используем компонент FlatList для отображения содержимого списка test
    <FlatList
      data={test}
      horizontal
      // Для каждого элемента списка визуализируем компонент View
      renderItem={({item}) => (
        <View
          style={{
            height: 'auto',
            width: 300,
            backgroundColor: 'red',
            marginLeft: 10,
          }}>
          <Text>{item.name}</Text>

          {/* Создаем горизонтальный ScrollView */}
          <ScrollView horizontal contentContainerStyle={{width: '100%', height: 100}}>
            {/* Для каждого элемента списка test визуализируем компонент View */}
            {test.map(data => (
              <View
                key={'lol' + data.id}
                style={{
                 backgroundColor: 'green',
                 width: 100,
                 height: 50,
                 marginLeft: 10,
                }}>
              </View>
            ))}
          </ScrollView>
        </View>
      )}
    />
 );
};

export default App;
```
Похожие вопросы