Question

您好，我是本机反应的新手，我试图在react-native博览会中设置基本路由，但我无法弄清我所缺少的内容。这是我的 app.js-

import React from "react";
import { createStackNavigator, createAppContainer  } from "react-navigation";
import LoginScreen  from "./src/components/screen/LoginScreen"
import HomeScreen  from "./src/components/screen/HomeScreen"


const RootStack = createStackNavigator({
LoginScreen: {
screen: LoginScreen
},
HomeScreen: {
screen: HomeScreen
}
});

const AppNavigator = createAppContainer(RootStack);

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

这是我的HomeScreen.js-

import React from "react";
import {
ScrollView,
Text,
View,
} from 'react-native';
export default class HomeScreen extends React.Component {


render() {
    return (
        <View >
            <ScrollView >
                <Text>Home Screen</Text>
            </ScrollView>
        </View>
    );
  }
}

这是我的LoginScreen.js-

import React from "react";
import {
ScrollView,
Text,
View,
Button,
} from 'react-native';
import HomeScreen from "./HomeScreen"

export default class LoginScreen extends React.Component {


render() {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >
                <Text>LoginScreen</Text>
                <Button onPress={ () => this.props.navigation.navigate('HomeScreen')} title = "Go To Home" />
        </View>
    );
 }
}

如果有人可以提出这是什么，那将是非常有帮助的，我想念我，我可以看到带有按钮的登录屏幕，但是单击后没有任何反应（无路由）。我测试了click，它可以在android-toast上正常工作。

Answer 1

您必须直接导出AppNavigator。

const App = createAppNavigator(RootStack);

export default App;

Answer 2

添加App.js

import React from 'react';
import { BrowserRouter,Route, Switch } from 'react-router-dom'
import LoginScreen  from "./src/components/screen/LoginScreen"
import HomeScreen  from "./src/components/screen/HomeScreen"

class RootStack  extends React.Component {
     <BrowserRouter>
                <Switch>
                    <Route exact path="/" component={LoginScreen} />
                    <Route exact path="/dashboard" component={HomeScreen} />
                </Switch>
            </BrowserRouter>
)


class App extends Component {
  render() {
    return (
      <RootStack  />
    );
  }
}

export default App;

即使导出后createAppContainer也不起作用

2 个答案: