我被困在这里过去几天,尝试了几乎所有相关的反应导航,但没有运气。这是流程。抽屉加载后,在主要我从Tabs调用视图,我在其中调用主屏幕的视图,在主屏幕中,我试图导航到类别屏幕。但得到这个错误。 this.props.navigation在tabs.js中变为未定义但在前一个屏幕中具有值是主要的。请帮忙。
App.js
export default class App extends React.Component {
constructor(){
super();
this.state = {
showRealApp: false
}
}
_onDone = () => {
this.setState({ showRealApp: true });
}
render() {
if (this.state.showRealApp) {
return <Navigator />;
} else {
return <AppIntroSlider slides={slides} onDone={this._onDone}/>;
}
}
}
AppRegistry.registerComponent('App', () => App)
AppNavigator.js
import { createStackNavigator, createAppContainer } from "react-navigation";
const RootStack = createStackNavigator({
Main: {
screen: Main,
navigationOptions: {header: null,}
},
Tabss: {
screen: Tabss,
navigationOptions: {header: null,}
},
Home: {
screen: Home,
navigationOptions: {header: null,}
},
SelectCategory: {
screen: SelectCategory,
navigationOptions: {header: null, }
},
});
const App = createAppContainer(RootStack);
export default App;
Main.js
`
export default class Main extends Component {
constructor(props)
{
super(props);
}
closeDrawer = () => {
this.drawer._root.close()
};
openDrawer = () => {
this.drawer._root.open()
};
render() {
// alert(this.props.navigation)
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
// { data: { avatar: this.state.avatar, name: this.state.name }
content={<Sidebar />}
onClose={() => this.closeDrawer()} >
<AppHeader
openDrawer={this.openDrawer.bind(this)}
/>
/////////////////// Calling Tab view///////
<Tabss />
</Drawer>
);
}
}
module.exports = Main;`
Tabs.js
export default class TabBars extends Component {
constructor(props){
super(props);
}
render() {
return (
<Container>
<Tab renderTabBar={() => <ScrollableTab style={{backgroundColor:'#DAA520'}} /> }>
<TabHeading={<TabHeading style={{backgroundColor: '#DAA520'}}>
<Icon name="home" style={{ color: 'white' }} />
</TabHeading>}>
<Home />
</Tab>
............
</Container>
)}
Home.js
export default class Home extends Component {
constructor(props) {
super(props);
}
render() {
return(
<View>
<Button onPress={() =>
this.props.navigation.navigate("SelectCategory")} style=
{{backgroundColor:'white', width: 210, height: 50, marginBottom: 30, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{color: '#4169E1', fontSize: 18, fontWeight:'bold'}}>
Select and PLAY
</Text>
</Button>
</View>
);
}
当用它调用其他屏幕的视图时,应该发送道具。
Main.js
render() {
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<Sidebar />}
onClose={() => this.closeDrawer()} >
<AppHeader
openDrawer={this.openDrawer.bind(this)}
/>
<Tabss data={this.props.navigation} />
</Drawer>
);
}
TabBar.js
export default class TabBars extends Component {
constructor(props){
super(props);
}
render() {
return (
<Container>
<Tab renderTabBar={() => <ScrollableTab style={{backgroundColor:'#DAA520'}} /> }>
<TabHeading={<TabHeading style={{backgroundColor: '#DAA520'}}>
<Icon name="home" style={{ color: 'white' }} />
</TabHeading>}>
<Home data ={this.props.data} />
</Tab>
............
</Container>
)}
home.js
export default class Home extends Component {
constructor(props) {
super(props);
}
render() {
return(
<View>
<Button onPress= {()=> this.props.data.navigate("SelectCategory")} style=
{{backgroundColor:'white', width: 210, height: 50, marginBottom: 30, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{color: '#4169E1', fontSize: 18, fontWeight:'bold'}}>
Select and PLAY
</Text>
</Button>
</View>
);
}
将您的Home.js更改为此,看看它是否有效:
另外,我假设您正确导出了RootStack并在App.js中使用它(或者如果您正在使用reactNavigation 3.0,则您正确创建了appContainer)
export default class Home extends Component {
constructor(props) {
super(props);
}
render() {
const { navigate } = this.props.navigation;
return(
<View>
<Button onPress={() =>
navigate('SelectCategory')}
style= {{backgroundColor:'white', width: 210, height: 50, marginBottom: 30, alignItems: 'center', justifyContent: 'center'}}
>
<Text style={{color: '#4169E1', fontSize: 18, fontWeight:'bold'}}>
Select and PLAY
</Text>
</Button>
</View>
);
}