React Native 重新挂载屏幕

Question

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

转到旧屏幕

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

我的列表不会刷新，因为我调用提取的 componentDidMount 方法不会再次被触发。我也试过 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 重新挂载屏幕

React Native re-mount screen

mount

react-native

react-navigation