React native navigation从另一个tabnavigator更改状态

Question

我使用的是react navigation/TabNavigator，有没有一种方法可以在不使用Redux或mobx的情况下从另一个选项卡更改选项卡的状态？

Answer 1

可以。它有点复杂，有点粗糙，可能有一些副作用，但理论上你可以做到。我在这里创建了一个工作示例小吃。

在react导航中，您可以使用路线键为其他屏幕设置参数。

当调度SetParams时，路由器将产生一个新状态已经更改了由密钥识别的特定路线的参数

• params-对象-必需-要合并到现有路由参数中的新参数
• key-string-必需-应该获取新参数的路由键

示例

import { NavigationActions } from 'react-navigation'
const setParamsAction = NavigationActions.setParams({
params: { title: 'Hello' },
key: 'screen-123',
})
this.props.navigation.dispatch(setParamsAction)

为了实现这一点，您需要知道要传递参数的屏幕的key道具。现在这是我们变得一团糟的地方。我们可以组合onNavigationStateChange和screenProps道具来获得当前堆栈密钥，然后将它们作为属性传递到我们当前所在的屏幕。

重要提示：因为onNavigationStateChange在应用程序首次启动时未激发，所以this.state.keys将是一个空数组。因此，您需要执行初始导航操作。

示例

class App extends Component {
constructor(props) {
super(props);
this.state = {
keys: []
};
}
onNavigationChange = (prevState, currentState) => {
this.setState({
keys: currentState.routes
});
}
render() {
return(
<Navigation
onNavigationStateChange={this.onNavigationChange}
screenProps={{keys: this.state.keys}}
/>
);
}
}

现在我们可以使用keys道具来获得我们需要的屏幕的键，然后我们可以传递所需的参数。

class Tab1 extends Component {
onTextPress = () => {
if(this.props.screenProps.keys.length > 0) {
const Tab2Key = this.props.screenProps.keys.find((key) => (key.routeName === 'Tab2')).key;
const setParamsAction = NavigationActions.setParams({
params: { title: 'Some Value From Tab1' },
key: Tab2Key,
});
this.props.navigation.dispatch(setParamsAction);
}
}
render() {
const { params } = this.props.navigation.state;
return(
<View style={styles.container}>
<Text style={styles.paragraph} onPress={this.onTextPress}>{`I'm Tab1 Component`}</Text>
</View>
)
}
}
class Tab2 extends Component {
render() {
const { params } = this.props.navigation.state;
return(
<View style={styles.container}>
<Text style={styles.paragraph}>{`I'm Tab2 Component`}</Text>
<Text style={styles.paragraph}>{ params ? params.title : 'no-params-yet'}</Text>
</View>
)
}
}

现在您可以从导航中获得新参数，您可以在屏幕中原样使用它，也可以在componentWillReceiveProps中更新您的状态。

componentWillReceiveProps(nextProps) {
const { params } = nextProps.navigation.state;
if(this.props.navigation.state.params && params &&  this.props.navigation.state.params.title !== params.title) {
this.setState({ myStateTitle: params.title});
}
}

更新

现在react导航支持监听器，您可以使用它来检测屏幕的焦点或模糊状态。

addListener-订阅导航生命周期的更新

React Navigation向订阅的屏幕组件发出事件它们：

• willBlur-屏幕将不聚焦
• willFocus-屏幕将聚焦
• didFocus-屏幕聚焦(如果有转换，则转换完成)
• didBlur-屏幕未聚焦(如果有转换，则转换完成)

文档中的示例

const didBlurSubscription = this.props.navigation.addListener(
'didBlur',
payload => {
console.debug('didBlur', payload);
}
);
// Remove the listener when you are done
didBlurSubscription.remove();
// Payload
{
action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' },
context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root',
lastState: undefined,
state: undefined,
type: 'didBlur',
};

Answer 2

如果我明白你想要什么，我是如何刷新以前的导航屏幕的。在我的例子中，我刷新了从相机拍摄的图像：

屏幕A

onPressCamera() {
const { navigate } = this.props.navigation;
navigate('CameraScreen', {
refreshImages: function (data) {
this.setState({images: this.state.images.concat(data)});
}.bind(this),
});
}

屏幕B

takePicture() {
const {params = {}} = this.props.navigation.state;
this.camera.capture()
.then((data) => {
params.refreshImages([data]);
})
.catch(err => console.error(err));
}