react-native中的scrollables

这是一个点击切换的demo

先看效果



然后看实现的代码

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer, FlatList } from 'react-navigation';

const data = new Array(30).fill(0);

//home
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <FlatList
          data={data}
          renderItem={({index}) => <Text style={{textAlign: 'center'}}>Home - {index}</Text>}
          contentContainerStyle={{ padding: 10 }}
        />
      </View>
    );
  }
}
//settings
class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <FlatList
          data={data}
          renderItem={({index}) => (
            <Text style={{
              textAlign: 'center',
              width: '100%',
              height: 100
            }}>Settings - {index}</Text>
          )}
          contentContainerStyle={{ padding: 10 }}
        />
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});

export default createAppContainer(TabNavigator);

demo自：https://reactnavigation.org/docs/en/scrollables.html