Question

我正在尝试向我的react-native应用程序添加一个简单的自定义导航菜单，但是我现在遇到的问题是我似乎无法找到一种导航到与屏幕相对应的所选菜单项的方法。我尝试了普通的this.props.navigation.navigate('Home')，但似乎没有导航道具，这是有道理的，因为在我的应用中，我假设导航道具从app.js通过屏幕向下传递到屏幕。使用<AppContainer />。

我尝试在MainNavigator中使用App.js对象，但是它似乎无法正常工作，并且没有导航功能或类似功能。

我还尝试过在App.js中稍微更改渲染函数的结构，但似乎效果不大。

这是我的App.js

import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity
} from 'react-native';
import {
createStackNavigator,
createAppContainer } from 'react-navigation';

// SCREEN
import MainScreen from './screens/MainScreen';
import CostAnalysis from './screens/CostAnalysis';
import DriverLog from './screens/DriverLog';

// SIDE MENU
import SideMenu from 'react-native-side-menu';

// REDUX IMPORTS
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { recordReducer } from './reducers/recordReducer';
import { databaseReducer } from './reducers/databaseReducer';

const MainNavigator = createStackNavigator({
  Home: {screen: MainScreen},
  DriverLog: {screen: DriverLog},
  CostAnalysis: {screen: CostAnalysis},
}, {
  defaultNavigationOptions: {
    header: null
  }
});

const AppContainer = createAppContainer(MainNavigator);

const rootReducer = combineReducers(
  {records: recordReducer,
     database: databaseReducer});

const store = createStore(rootReducer);

class App extends Component {
  render() {
    const menu = (<View style={{
      backgroundColor: '#f0f0f0', 
      alignContent: 'center', 
      textAlign: 'center', height: '100%', width: '100%', paddingTop: '40%'}}>
      <Text style={styles.menuTitle}>{'S K I P\nD R I V E R\nL O G'}</Text>
      <TouchableOpacity onPress={() => {this.props.navigation.navigate('Home')}}>
        <Text style={styles.menuItem}>HOME</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => {MainNavigator.navigate('DriverLog')}}>
        <Text style={styles.menuItem}>DRIVING LOG</Text>
      </TouchableOpacity>
    </View>);

    return (
      <SideMenu menu={menu} >
        <Provider store={store}>
          <AppContainer />
        </Provider>
      </SideMenu>
    );
  }
}

const styles = {
  menuTitle: {
    marginBottom: 60,
    fontSize: 40,
    textAlign: 'center',
    color: '#e74c3c'
  },
  menuItem: {
    marginBottom: 10,
    fontSize: 26,
    textAlign: 'center'
  }
}

export default (App);

理想情况下，由于我在其他领域取得了许多进展，因此我不必重新构建整个应用程序，但是我真的希望菜单可以简单地链接到正确的位置。

我对本机反应还是很陌生，所以我真的不知道还能尝试什么。如果有人可以帮我，将不胜感激！

谢谢：）

PS：查看菜单图片以说明我的意思 Menu Screenshot

Answer 1

您必须实现构造函数

class App extends Component {
constructor(props) {
  super(props);
  } 
}

或

如果您使用的是抽屉，请将其用作单独的组件

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

class SideDrawer extends Component{
constructor(props) {
  super(props);
  } 
render(){
   return(
<View style={{
      backgroundColor: '#f0f0f0', 
      alignContent: 'center', 
      textAlign: 'center', height: '100%', width: '100%', paddingTop: '40%'}}>
      <Text style={styles.menuTitle}>{'S K I P\nD R I V E R\nL O G'}</Text>
      <TouchableOpacity onPress={() => {this.props.navigation.navigate('Home')}}>
        <Text style={styles.menuItem}>HOME</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => {MainNavigator.navigate('DriverLog')}}>
        <Text style={styles.menuItem}>DRIVING LOG</Text>
      </TouchableOpacity>
    </View>
)
}
}

export default sideDrawer

然后在导航器中

  const HomeNavigator = StackNavigator(
  Home: {screen: MainScreen},
  DriverLog: {screen: DriverLog},
  CostAnalysis: {screen: CostAnalysis},
    }

const MainNavigator = DrawerNavigator({
Home: {
    screen: HomeNavigator,
  },
}, {
  contentComponent: sideDrawer,
  drawerWidth: width * .7,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle',
});

有没有一种方法可以从父组件中内置的菜单导航到其他屏幕？

1 个答案: