Question

我正在尝试导出stacknavigator，以便子屏幕可以具有一些屏幕属性。我试过这样的事情：

//Router.js
import React, { Component } from 'react';
import {StackNavigator} from 'react-navigation';
import { AppRegistry } from 'react-native';
import Home from './Home';

let Router = 
{
  Home: {screen: Home, screenProps:"hello"},
}

const Navigator = StackNavigator(Router);
export default Navigator;

然后我

//Home.js

import React, { Component } from 'react';

/* define navOptions */

export default class Home extends Component {
  static navigationOptions = navOptions;

  componentDidMount()
  {
    const db = new DB(this);
    db.open();
  };
    constructor(props)
    {
        super(props);
    }
render ()
{
console.log(this.props);
}
}

但是this.props.screenProps是空的。

然后我尝试这样做

//Router.js
import React, { Component } from 'react';
import {StackNavigator} from 'react-navigation';
import { AppRegistry } from 'react-native';
import Home from './Home';

let Router = 
{
  Home: {screen: Home, screenProps:"hello"},
}

const Navigator = StackNavigator(Router);
const nav = <Navigator screenProps="hello" />
export default nav;

但是这导致了这个错误

元素类型无效：需要一个字符串（用于内置组件）或类/函数（对于复合组件）但得到：object。

那么如何从路由器文件将自定义屏幕属性传递到我的主屏幕？

Answer 1

错误说screenProps需要一个对象，而不是一个字符串。所以screenProp应该看起来像这样

let Router = 
{
    Home: {screen: Home, screenProps: {name: "hello"}}
}

如果＆＃34;名称＆＃34;是你想要分配＆＃34;你好＆＃34;至。这至少是使用TabNavigator的方式。

在StackNavigator中你没有通过screenProps，但根据How to Pass Parameters to screen in StackNavigator?这就是你的路由器应该是这样的

let Router = 
{
    Home: {screen: Home, {name: "hello"}}
}

您可以使用this.props.navigation.state.params.name

在另一侧访问它

如何使用screenprops导出stacknavigator？

1 个答案: