reactjs - 使用按钮反应原生导航

问题描述

我想使用 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

标签： reactjsreact-nativereact-navigation

reactjs - 使用按钮反应原生导航

问题描述

解决方案

推荐阅读