/* 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(); //如果需要,您也可以传递参数
我收到错误消息“无法读取未定义的属性导航”。