Question

我尝试使用一些基本路由创建React Native应用程序。

到目前为止，这是我的代码：

App.js：

import React from 'react'
import { StackNavigator } from 'react-navigation'
import MainScreen from './classes/MainScreen'


const AppNavigator = StackNavigator(
    {
        Index: {
            screen: MainScreen,
        },
    },
    {
        initialRouteName: 'Index',
        headerMode: 'none'
    }
);

export default () => <AppNavigator />

MainScreen.js：

import React, { Component } from 'react'
import { StyleSheet, Text, View, Button, TouchableOpacity, Image } from 'react-native'
import HomeButton from './HomeButton'

export default class MainScreen extends Component {
    static navigatorOptions = {
        title: 'MyApp'
    }

    constructor(props) {
        super(props)
    }

    render() {
        return (
            <View style={styles.container}>
                <Image source={require('../img/logo.png')} style={{marginBottom: 20}} />
                <HomeButton text='Try me out' classType='first' />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
})

HomeButton.js：

import React, { Component } from 'react'
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native'
import { StackNavigator } from 'react-navigation'


export default class HomeButton extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <TouchableOpacity
                onPress={() => navigate('Home')}
                style={[baseStyle.buttons, styles[this.props.classType].style]}
            >
                <Text style={baseStyle.buttonsText}>{this.props.text.toUpperCase()}</Text>
            </TouchableOpacity>
        )
    }
}

var Dimensions = require('Dimensions')
var windowWidth = Dimensions.get('window').width;

const baseStyle = StyleSheet.create({
    buttons: {
        backgroundColor: '#ccc',
        borderRadius: 2,
        width: windowWidth * 0.8,
        height: 50,
        shadowOffset: {width: 0, height: 2 },
        shadowOpacity: 0.26,
        shadowRadius: 5,
        shadowColor: '#000000',
        marginTop: 5,
        marginBottom: 5
    },
    buttonsText: {
        fontSize: 20,
        lineHeight: 50,
        textAlign: 'center',
        color: '#fff'
    }
})

const styles = {
    first: StyleSheet.create({
        style: { backgroundColor: '#4caf50' }
    })
}

一切正常，但按下按钮后我得到

无法找到变量：导航

我已经读过，我必须这样声明：

const { navigate } = this.props.navigation

所以我编辑了HomeButton.js并在render函数的开头添加了该行：

render() {
    const { navigate } = this.props.navigation
    return (
        <TouchableOpacity
            onPress={() => navigate('Home')}
            style={[baseStyle.buttons, styles[this.props.classType].style]}
        >
            <Text style={baseStyle.buttonsText}>{this.props.text.toUpperCase()}</Text>
        </TouchableOpacity>
    )
}

现在我明白了：

TypeError：undefined不是对象（评估＆＃39; this.props.navigation.navigate＆＃39;）

似乎navigation对象没有进入属性，但我不明白我应该从哪里获取它。

我在这里缺少什么？

Answer 1

React-navigation将导航道具传递给堆栈导航器中定义的屏幕组件。

因此，在您的情况下，MainScreen可以访问this.props.navigation，但HomeButton则无法访问。{/ p>

如果您将导航道具从MainScreen传递到HomeButton：

，它应该有效

<HomeButton text='Try me out' classType='first' navigation={this.props.navigation}/>

编辑：你必须在堆栈导航器中定义Home屏幕才能导航到它，onPress={() => navigate('Home')}在此之前无效。

undefined不是一个对象（评估＆＃39; this.props.navigation＆＃39;）

1 个答案: