如何通过navigation.state.params从另一个组件访问一个组件的功能

时间:2019-09-10 11:48:35

标签: react-native react-native-ios stack-navigator tabnavigator

/* Login Component */        
class Login extends Component {
          constructor(props) {
            super(props);
            this.state = {
              
              test: 'old_value'
            };
          }



          updateState = () => {
            console.log(this.state.test);
            this.setState({ test: 'new value' });
            console.log(this.state.test);
          }

          _onLoginSuccess() {
              this.props.navigation.navigate('Home', { update: this.updateState });
                  
         }
}

/ *主页组件* /

        const TabScreen = createMaterialTopTabNavigator(
            {
             
                Screen1: {
                    screen: Screen1,
                    navigationOptions: {
                        tabBarIcon: ({ tintColor }) => (
                            <Icon name="fork" size={20} />
                        )
                    }
                },
                Screen2: {
                    screen: Screen2,
                    navigationOptions: {
                        tabBarIcon: ({ tintColor }) => (
                            <Icon name="profile" size={24} />
                        )
                    }
                }
            },
            {
                tabBarPosition: 'bottom',
                swipeEnabled: true,
                animationEnabled: true,
                tabBarOptions: {
                    activeTintColor: 'gray',
                    inactiveTintColor: 'gray',
                    iconStyle: {
                        inactiveTintColor: 'lightgray'
                    },
                    style: {
                        backgroundColor: 'white',
                        height: 60,
                        borderTopColor: 'gray',
                        borderBottomColor: 'white',
                        borderWidth: 0.5
                    },
                    labelStyle: {
                        textAlign: 'center',
                        fontSize: 11,
                        letterSpacing: 0,
                        width: 90,
                        padding: 0,
                        height: 13
                    },
                    indicatorStyle: {
                        borderBottomColor: 'gray',
                        borderBottomWidth: 2,
                    },
                    showIcon: true,
                    showLabel: true,
                },
            }
        );

        const App = createStackNavigator({
            TabScreen: {
                screen: TabScreen,
                navigationOptions: {
                    headerStyle: {
                        backgroundColor: '#633689',
                    },
                    header: null,
                    headerTintColor: '#FFFFFF',
                    title: '',
                    tabBarLabel: ({ focused, tintColor: color }) => (
                        <Icon name="message-text-outline" size={20} color={color} />
                    )
                },
            },
        });

Here I want to call updateState function from the home screen component.

由于createMaterialTopTabNavigator是一个标签栏导航,因此我没有登录导航堆栈的引用。而当我尝试使用以下代码

this.props.navigation.state.params.update(); //如果需要,您也可以传递参数

我收到错误消息“无法读取未定义的属性导航”。

0 个答案:

没有答案