组件之间 React Native 中的导航器
Navigator in React Native between components
我想简单导航到另一个组件。我用 createStackNavigator 尝试过,但不幸的是它没有用。第一页是App,第二页是AppLoggedin。这是我的第一个 React Native 应用程序。然后我想稍后导航到信息和印象。你能帮我吗?
const switchNavigator = createSwitchNavigator({
loginFlow: createStackNavigator({
Signup: SignupScreen,
Signin: SigninScreen
}),
mainFlow: createStackNavigator({
Home: HomeScreen,
Settings: SettingsScreen
}),
});
export default createAppContainer(switchNavigator);
尝试这样的事情。
确保导入所有需要的内容,例如 AppContainer 和 Navigators。
当您完成此设置后,您可以使用按钮的 onPress 属性 在屏幕之间导航:
在你的函数中使用这样的:
<Button
onPress={() => navigation.navigate('//The name of the screen where you want to navigate to. )>
</Button>
最后给你的函数导航道具;
const NameOfYourScreen = (props) => {
...
}
import {createStackNavigator} from 'react-navigation'
import App from './App'
import AppLoggedIn from './AppLoggedIn'
const Stack = createStackNavigator(
{
App: {
screen: App
},
AppLoggedIn:{
screen:AppLoggedin
},
);
export default Stack;
在你的 App.js 中输入:
import Stack from './stacknavigator'
export default class App extends Component {
render(
<Stack>
)
}
用于在屏幕之间导航:
this.props.navigation.navigate('App')
我想简单导航到另一个组件。我用 createStackNavigator 尝试过,但不幸的是它没有用。第一页是App,第二页是AppLoggedin。这是我的第一个 React Native 应用程序。然后我想稍后导航到信息和印象。你能帮我吗?
const switchNavigator = createSwitchNavigator({
loginFlow: createStackNavigator({
Signup: SignupScreen,
Signin: SigninScreen
}),
mainFlow: createStackNavigator({
Home: HomeScreen,
Settings: SettingsScreen
}),
});
export default createAppContainer(switchNavigator);
尝试这样的事情。 确保导入所有需要的内容,例如 AppContainer 和 Navigators。
当您完成此设置后,您可以使用按钮的 onPress 属性 在屏幕之间导航:
在你的函数中使用这样的:
<Button
onPress={() => navigation.navigate('//The name of the screen where you want to navigate to. )>
</Button>
最后给你的函数导航道具; const NameOfYourScreen = (props) => { ... }
import {createStackNavigator} from 'react-navigation'
import App from './App'
import AppLoggedIn from './AppLoggedIn'
const Stack = createStackNavigator(
{
App: {
screen: App
},
AppLoggedIn:{
screen:AppLoggedin
},
);
export default Stack;
在你的 App.js 中输入:
import Stack from './stacknavigator'
export default class App extends Component {
render(
<Stack>
)
}
用于在屏幕之间导航:
this.props.navigation.navigate('App')