Question

在我的第一页上，我有一个列表，我可以通过获取来获取。这适用于第一次通话。但是当我使用this.props.navigation.navigate('OtherScreen');转到其他屏幕并使用

返回旧屏幕时

 const backAction = NavigationActions.back({
     key: null,
 });
 this.props.navigation.dispatch(backAction)

我的列表无法刷新，因为componentDidMount方法我调用fetch不会再次触发。我也试过componentWillUpdate，但这也不会再被触发。

当我输入屏幕时，如何强制屏幕重新安装？

Answer 1

您可以试试https://facebook.github.io/react/docs/react-component.html#forceupdate。

或者，如果我正确理解了这个任务

//screen A
import {DeviceEventEmitter} from 'react-native'
componentWillMount() {
    DeviceEventEmitter.addListener('your listener', (e)=>{})
}

//screenB
DeviveEventEmitter.emit('your listener',  {})

Answer 2

我不知道DeviceEventEmitter在这种情况下是如何工作的，但我做到了这样：

屏幕A：

  constructor(props) {
   super(props);

   this.state = {
     images: [],
   };
 }

  onPressCamera() {
   const { navigate } = this.props.navigation;

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

render
...
<FlatList
  data={ this.state.images }
  renderItem={ (row) => this.renderImage(row) }
  keyExtractor={ item => item.path }
/>

屏幕B：

  takePicture() {
   const {params = {}} = this.props.navigation.state;

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

在这里，我导航到相机屏幕，然后单击捕捉按钮我刷新上一屏幕。

Answer 3

在安装屏幕后，我使用 NavigationEvents 刷新屏幕，我使用它的方式如下：

import { NavigationEvents } from 'react-navigation';

然后将其命名为：

class Home extends Component {
    render() {
        return (
            <View>
                <NavigationEvents
                onDidFocus={() => Alert.alert('Refreshed')}
                />
                <Button
                onPress={()=>{this.props.navigation.navigate('Other_Screen')}}
            />
            </View>
        );
    }
}

这将刷新每个导航中的屏幕。希望这就是您要寻找的！

React Native重新安装屏幕

3 个答案: