Question

设法构建了我的第一个React native-navigation v2，这是一个从LoginScreen到HomeScreen的堆栈导航。

我遇到的问题是，我尝试将“抽屉导航”放置在主屏幕上，然后将其放置在堆栈导航中，但是我不知道该怎么做。

错误消息：无法从“ .//src/components/DrawerNavigator.js: The module中解析./src/components/HomeScreen”。/src / components / HomeScreen`可能找不到” 无法建立JavaScript套件

在下面查看我的代码。

LoginForm.js

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

export default class LoginForm extends Component {

  render() {
   return (
      <View style={styles.container}>
      <StatusBar
      barStyle="dark-content"
      />

        <TouchableOpacity style={styles.buttonContainer} onPress={() => this.props.navigation.navigate('DrawerNavigator')}>
          <Text style={styles.buttonText}>LOGIN</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

App.js

import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { Header, List, ListItem, Icon } from 'react-native-elements';
import Login from './src/components/Login/Login';
import LoginForm from './src/components/Login/LoginForm';
import HomeScreen from './src/components/HomeScreen';
import DayPlanScreen from './src/components/DayPlanScreen';
import { createStackNavigator } from 'react-navigation';
import DrawerNavigator from './src/components/DrawerNavigator'

export default class App extends React.Component {
  static navigationOptions = {
    header: null
  }
  render() {
    return (
      <View style={styles.container}>
{

        <AppStackNavigator />
}
      </View>
    );
  }
}

const AppStackNavigator = createStackNavigator ({
  Login: Login,
  Home: HomeScreen,
  DrawerNavigator: DrawerNavigator
})


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#fff',
  },
  addBtn: {
    position: 'absolute',
    bottom: 10,
    right: 0
  },
});

DrawerNavigator.js

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet
} from "react-native";
import HomeScreen from './src/components/HomeScreen';
import { createDrawerNavigator } from 'react-navigation'

const DrawerNavigator = createDrawerNavigator({
  Home: HomeScreen,
  DayPlan: DayPlanScreen
})

export default DrawerNavigator;

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

主屏幕

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet
} from "react-native";
import { Button } from 'react-native-elements';

class HomeScreen extends Component {
  render(){
    return (
      <View style={styles.container}>
        <Text style={{color: 'white'}}>HomeScreen</Text>
        <Button
        title='LOGIN SCREEN'
        onPress={()=>this.props.navigation.goBack()}
        fontWeight='700'
        backgroundColor='#3AD7FF'
        color='#424242'
        />
      </View>
    );
  }
}

export default HomeScreen;

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

react-navigation-react native中堆栈导航内的抽屉导航

0 个答案: