Question

我想使用react-native在页面之间导航。我总共有三页。我可以从第一页->第二页->第三页导航。

但是，从第三页开始，当我尝试返回第一页时，出现错误“未定义不是对象（正在评估'_this2.props.navigation.navigate）。

在第三页中，与其他两页不同，我导入了一个类以导航回到第一页，但这给了我一个错误。下面是我的代码。

这是我的App.js：

import React, {Component} from 'react'
import {View,Text,StyleSheet,ScrollView,Image,Button} from "react-native"
import FirstScreen from './FirstScreen'
import SecondScreen from './SecondScreen'
import ThirdScreen from './ThirdScreen'
import {StackNavigator} from 'react-navigation'

class App extends Component {
  render(){
    return(
    <MyApp/>
    )
  }
}

const MyApp = StackNavigator({
  Frist:FirstScreen,
  Second:SecondScreen,
  Third:ThirdScreen
})

export default App

这是我的第一个屏幕代码：

import React, {Component} from 'react'
import{ View,StyleSheet,Button} from 'react-native'

class FirstScreen extends Component{
  render() {
    return(
      <View style={styles.container}>
            <Button title="go to Second screen"
               onPress={()=>this.props.navigation.navigate('Second')}>
            </Button>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default FirstScreen

这是我的第二个屏幕代码：

import React, {Component} from 'react'
import{ View, StyleSheet,Button} from 'react-native'
import CardDetail from './Components/CardDetail'

class SecondScreen extends Component {
  render(){
    return(
      <View style={styles.container}>

        <Button title="go to Third screen"
            onPress={()=>this.props.navigation.navigate('Third')}/>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container:{
    flex:1,
    paddingTop:20,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default SecondScreen

这是我的第三个屏幕代码：

import React, {Component} from 'react'
import{ View,Button,StyleSheet} from 'react-native'
import CardDetail from './Components/CardDetail'

class ThirdScreen extends Component{
  render() {
    return(
      <View style={styles.container}>
            <CardDetail/>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container:{
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default ThirdScreen

这是我导入的类：

import React, {Component} from 'react'
import {View,
  StyleSheet,
  Button} from 'react-native'

class CardDetail extends Component{
  render() {
    return(
      <View style={styles.container}>
            <Button title="go back to First screen"
                    onPress={()=>this.props.navigation.navigate('First')}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})
export default CardDetail

Answer 1

<CardDetail />未提供navigation道具，即

<CardDetail navigation={this.props.navigation} />

react-navigation将自动为导航器创建中指定的屏幕提供navigation道具，但是如果您希望这些屏幕上的子组件使用它，则需要通过上下文或如上手动操作。

Answer 2

尝试查看BrowserRouter

这是一个示例：

 <Route path="/name" exact strict render={
        ()=> {
          return (
            <div> your code </div> ....

使用按钮进行本机导航

2 个答案: