我有 4 个页面:App.js、HomeScreen.js、Login.js、Toolbar.js
我的带有 StackNavigator 的应用页面:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import Splash from './screens/Splash';
import HomeScreen from './screens/HomeScreen';
import Login from './screens/Login';
import Lobby from './screens/Lobby';
import Wifi from './screens/Wifi';
import Toolbar from './components/ToolBar/Toolbar';
import Mobile from './screens/Mobile';
;
const Navigation = StackNavigator({
Splash:{screen: Splash},
HomeScreen:{screen: HomeScreen},
Login:{screen: Login},
Lobby:{screen: Lobby},
Wifi:{screen: Wifi},
Mobile:{screen:Mobile}
}, {
mode: 'modal',
headerMode: 'none'
});
export default Navigation;
我正在将工具栏导入 HomeScreen,并希望将导航道具从 HomeScreen 传递到 Toolbar,以便我可以从 Toolbar 和 HomeScreen 访问登录页面。
我的工具栏页面:
import React,{Component} from 'react';
import {Text, View, Button, StyleSheet, TouchableOpacity,
Dimensions,
Image,ScrollView, Picker, FlatList} from 'react-native';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import config from '../../components/config/index';
class Toolbar extends Component{
constructor(){
super()
this.state = {
}
}
render(){
//const {navigate} = this.props.navigation;
return(
<View style={styles.mainToolbar}>
<View style={styles.containerForThree}>
<View style={styles.leftArrowContainer}>
<TouchableOpacity
onPress={()=>navigate('Login')}
>
<Text>hello</Text>
</TouchableOpacity>
</View>
截至目前,我已将 const navigate 注释掉,因为 HomeScreen 如果出现则不会加载。
主屏幕:
import React,{Component} from 'react';
import {
AppRegistry, StyleSheet, Text, View, Image, ScrollView, Button, TouchableOpacity, Dimensions
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Toolbar from '../components/ToolBar/Toolbar';
export default class HomeScreen extends Component {
static navigationOptions ={
title: 'Home Screen'
};
onValueChange(value, idx){
this.setState({
language: value
})
AsyncStorage.setItem('language', value)
}
render(){
var {navigate} = this.props.navigation;
return(
<View style={styles.scrollContainer}>
<Toolbar navigate={navigate}/>
<View>
<Text>Welcome To the SEcond Page</Text>
<Button
onPress={
()=>navigate("Login")
}
title="Go to Login"
/>
</View>
我试图通过 HomeScreen 将导航道具传递到工具栏
当我按下按钮时,它说找不到变量“导航”。但是,当我取消注释掉工具栏上的导航时,我收到错误 TypeError: undefined is not an object(evaating 'this.props.navigation.navigate')