React-原生ScrollView垂直和水平滚动

npx react-native init MyScrollViewApp
cd MyScrollViewApp

// App.js
import React from 'react';
import { ScrollView, View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <ScrollView style={styles.container}>
      {Array.from({ length: 20 }, (_, i) => (
        <View key={i} style={styles.box}>
          <Text>Item {i + 1}</Text>
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  box: {
    height: 100,
    marginBottom: 10,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

// App.js
import React from 'react';
import { ScrollView, View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <ScrollView horizontal={true} style={styles.container}>
      {Array.from({ length: 20 }, (_, i) => (
        <View key={i} style={styles.horizontalBox}>
          <Text>Item {i + 1}</Text>
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  horizontalBox: {
    width: 100,
    height: 100,
    marginRight: 10,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

// App.js
import React from 'react';
import { ScrollView, View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <ScrollView style={styles.container}>
      <ScrollView horizontal={true} style={styles.innerContainer}>
        {Array.from({ length: 20 }, (_, i) => (
          <View key={i} style={styles.box}>
            <Text>Item {i + 1}</Text>
          </View>
        ))}
      </ScrollView>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  innerContainer: {
    flexDirection: 'row',
  },
  box: {
    width: 100,
    height: 100,
    marginRight: 10,
    marginBottom: 10,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

npx react-native run-android
# 或者
npx react-native run-ios