TabNavigator 和道具

Question

我在使用 TabNavigator 时遇到问题...我想在我的导航中传递一个参数，但我很努力但没有:(

navigation.js

import React, { Component } from 'react';
import { TabNavigator } from 'react-navigation';

import ListingScreen from './listing';
import PreferencesScreen from './preferences';
import AddScreen from './add';
import CalendarScreen from './calendar';
import ProfessionalScreen from './professional';

const navigation = TabNavigator({
    Listing: {screen: ListingScreen},
    Preferences: {screen: PreferencesScreen, screenProps: {option: "My first option"}},
    Add: {screen: AddScreen},
    Calendar: {screen: CalendarScreen},
    Professional: {screen: ProfessionalScreen},
}, {
    tabBarOptions: {
        activeTintColor: 'blue',
        activeBackgroundColor: 'grey',
        inactiveTintColor: 'black',
    },
});

<navigation
    screenProps="I am a Props !"
/>

export default navigation;

我的其他屏幕：（它们是相同的） preferences.js

import React, { Component } from 'react';
import {View, Text} from 'react-native';

export default class Preferences extends Component {
    static navigationOptions = {
        title: 'Preferences',
    };

    constructor(props) {
        super(props);
        console.log("Constructor");
        console.log(this.props)
    }
    render() {
        return (
            <View>
                <Text style={{marginTop: '80%', marginLeft: '40%'}}> Preferences </Text>
            </View>
        );
    }
}

在我的构造函数中，我尝试显示道具，但我有...

有人知道用那个吗？

Answer 1

试试这个：

import React, { Component } from 'react';
import { TabNavigator } from 'react-navigation';

import PreferencesScreen from './preferences';

const Navigation = TabNavigator({
  Preferences: {screen: PreferencesScreen},
}, {
  tabBarOptions: {
    activeTintColor: 'blue',
    activeBackgroundColor: 'grey',
    inactiveTintColor: 'black',
  },
});

export default class Index extends Component {
  render() {
    return <Navigation screenProps="I am a Props !"/>;
  }
}

TabNavigator 和道具

TabNavigator and Props

react-native

tabnavigator

react-props