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

Question

[kokosikS]

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'},
];

const App = () => {
	return (
		<View style={{flex: 1, backgroundColor: '#ccc'}}>
			<FlatList
				data={test}
				horizontal
				renderItem={({item}) => (
					<View
						style={{
							height: 'auto',
							width: 300,
							backgroundColor: 'red',
							marginLeft: 10,
						}}>
						<Text>{item.name}</Text>

						<View style={{marginTop: 50}}>
							<ScrollView style={{height: 100}} horizontal nestedScrollEnabled>
								{test.map(data => (
									<View
										key={'lol' + data.id}
										style={{
											backgroundColor: 'green',
											width: 100,
											height: 50,
											marginLeft: 10,
										}}></View>
								))}
							</ScrollView>
						</View>
					</View>
				)}
			/>
		</View>
	);
};

export default App;

вот мой код и я не могу скролить ScrollView

Answer 1

[Taulan Khatuaev]

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'},
];

const App = () => {
 return (
    <FlatList
      data={test}
      horizontal
      renderItem={({item}) => (
        <View
          style={{
            height: 'auto',
            width: 300,
            backgroundColor: 'red',
            marginLeft: 10,
          }}>
          <Text>{item.name}</Text>

          <ScrollView horizontal contentContainerStyle={{width: '100%', height: 100}}>
            {test.map(data => (
              <View
                key={'lol' + data.id}
                style={{
                 backgroundColor: 'green',
                 width: 100,
                 height: 50,
                 marginLeft: 10,
                }}>
              </View>
            ))}
          </ScrollView>
        </View>
      )}
    />
 );
};

export default App;

Comments

[kokosikS]

это ответ? все как и было