react native 实现自定义底部导航与路由文件配置

import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Ionicons } from '@expo/vector-icons';
 
// 定义各个Tab的页面组件
function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}
 
function SettingsScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Settings Screen</Text>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}
 
// 创建底部导航
const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen
});
 
// 应用包装
const AppContainer = createAppContainer(TabNavigator);
 
export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

这段代码展示了如何在React Native中使用react-navigation库创建一个带有自定义底部导航的应用。首先定义了两个页面组件HomeScreen和SettingsScreen，然后使用createBottomTabNavigator创建了一个底部导航器，最后使用createAppContainer将导航器应用起来。这个例子简洁明了，并且包含了实际的代码实现，对于学习React Native导航组件有很好的教育意义。