Question

请帮帮我。我正在制作移动应用。我有底部的标签导航，可以在3个主要页面之间进行导航。我已经完成了第一页和第二页之间的导航，但没有使用按钮的底部导航。当我做到这一点时，我还没有想要的东西。如果您能帮助我，我将非常高兴。当我从第一页导航到第二页时，我有2个标题。但是我想做1：

有2个标题，第一个是<，第二个是“课程”，我想使它像这样的“ <课程”。请帮帮我。代码：

// 1st page

import Courses from './Courses'

<Button
onPress={() => {
   navigate('Courses')
}}
 title="More courses"
/>

  const RootStack = createStackNavigator(
    {
      Home: {
        screen: HomeScreen,
      },
      Courses: {
        screen: Courses,
      },
      Details: {
        screen: DetailsScreen,
      },
    },
    {
      initialRouteName: 'Home',
    }
  );

  const AppContainer = createAppContainer(RootStack);

  export default class App extends React.Component {
    render() {
      return <AppContainer />;
    }
  }

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

import Icon from 'react-native-vector-icons/Ionicons'
import Home from './screens/Home'
import Courses from './screens/Courses'
import Editor from './screens/Editor'
import AppNavigator from './AppNavigator';



const TabNavigator = createBottomTabNavigator({
  Home:{
    screen:Home,
    navigationOptions:{
      tabBarLabel:'Home',
      tabBarIcon:({tintColor})=>(
        <Icon name="ios-home" color={tintColor} size={24} />
      )
    }
  },

  Courses:{
    screen:Courses,
    navigationOptions:{
      tabBarLabel:'Courses',
      tabBarIcon:({tintColor})=>(
        <Icon name="ios-school" color={tintColor} size={24} />
      )
    }
  },
  Editor:{
    screen:Editor,
    navigationOptions:{
      tabBarLabel:'Editor',
      tabBarIcon:({tintColor})=>(
        <Icon name="ios-document" color={tintColor} size={24} />
      )
    }
  },

},{
  tabBarOptions:{
    activeTintColor:'#db0202',
    inactiveTintColor:'grey',
    style:{
      fontSize:3,
      height:45,
      backgroundColor:'white',
      borderTopWidth:0,
      elevation: 5
    }
  }
});



export default createAppContainer(TabNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

您不需要在主屏幕中定义另一个导航器。如果您这样定义Home，它将起作用：

import React from 'react'
import { Button, View } from 'react-native'

export default class Home extends React.Component {
  render() {
    const { navigation: { navigate } } = this.props
    <Button
      title='More Courses'
      onPress={() => navigate('Courses')}
    />
  }
}

您的其他屏幕应与此类似。

反应导航问题

1 个答案: