Question

我已经在这个问题上工作了两天，网上似乎没有任何东西正是我正在寻找的。

我正在尝试将StackNavigator实现到我的React Native应用程序中，但出于某种原因，“导航”并未作为支持传递给所涉及的组件。因此，当我按下按钮调用this.props.navigation.navigator时，我收到错误undefined is not an object (evaluating this.props.navigation.navigate)。

我已经多次记录了道具并且道具对象是空的，所以这个问题不是解决道具对象问题，就像其他人得到这个错误一样，但事实上导航道具是不是第一个地方。

我已经尝试将导航器代码放在它自己的文件和App.js文件中，认为它是在呈现组件之后以某种方式调用的，因此没有机会通过导航道具，但是没有也没工作。我还查看了它是否是componentDidMount事件中的props的一部分。仍然没有。

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


import { getDecks } from '../utils/api'
import NewDeckView from './NewDeckView'
import DeckListItem from './DeckListItem'






export default class DeckListView extends Component {

        constructor(props){


            super(props)

            this.state = {

                decks: []
            }


        }


        componentDidMount(){

            console.log('props now test',this.props)
            getDecks()
            .then( result => {

                const parsedResult = JSON.parse(result);
                const deckNames = Object.keys(parsedResult);
                const deckObjects  = [];
                deckNames.forEach( deckName => {
                    parsedResult[deckName].key = parsedResult[deckName].title    
                    deckObjects.push(parsedResult[deckName])
                })

                this.setState({
                    decks:deckObjects
                })

            } )
        }





        render(){

            return (



                    <View style={styles.container}>
                        <Text style={styles.header}>Decks</Text>
                        <FlatList data={this.state.decks} renderItem={({item})=><DeckListItem title={item.title} noOfCards={item.questions?item.questions.length:0}/>} />
                        <Button styles={styles.button} title="New Deck" onPress={()=>{this.props.navigation.navigate('NewDeckView')}}/>
                    </View>

            )
        }       
}


const styles = StyleSheet.create({


    header:{
        fontSize:30,
        margin:20,

    },

    container:{

        flex:1,
        justifyContent:'flex-start',
        alignItems:'center'
    },

    button:{

        width:50
    }
})


const Stack = StackNavigator({

        DeckListView : {
            screen: DeckListView,

        },

        NewDeckView: {
            screen:NewDeckView,

        }


    })

Answer 1

像Vicky和Shubhnik Singh提到的那样，你需要在App.js中渲染导入的导航堆栈，如下所示：

set.seed(47)
a <- list()  ## if a is not a list then it works very good. 
for( i in 1:2){

a[[i]] <- array(rnorm(5 * 5 * 2), c(5, 5, 2))

lower_tris <- apply(a[[i]], 3, function(x){x[lower.tri(x)]}) 

list_of_pairs <- split(lower_tris, seq(nrow(lower_tris)))
}

导航器应该看起来像这样，默认情况下将渲染传递给StackNavigator的对象中的第一个键。在这种情况下，它将是DeckListView。

import React from 'react';
import { Stack } from './navigator/navigator'

export default class App extends React.Component {

  render() {

    return <Stack/>
  }
}

谢谢大家的支持！不知何故，这在文档中对我来说并不清楚。

React Native：为什么“导航”没有传递给我的组件？

1 个答案: