时间戳

首页 > 解决方案 > 如何更新不同的屏幕形成另一个独立的屏幕？

react-native - 如何更新不同的屏幕形成另一个独立的屏幕？

问题描述

我有一个带有 2 个屏幕的导航栏的应用程序。当我在 Screen/Component 1 上应用功能时，我想在第二个屏幕中呈现或触发更改。

有没有办法在 Enter 上重新渲染屏幕或更新另一个屏幕的状态？

组件一：

export default class HomeScreen extends React.Component {

    constructor() {
      super();

     }

    _onPress(){
      try {
          await AsyncStorage.setItem('value', 'changed Value');
        } catch (error) {

          console.log(error.message);
        } 
        console.log("saved: "  + this.state.userName )


     }

   render() {





    return (
      <View style={styles.container}>
        <Button title="btn" onPress={() => this._onPress()} >                                                                    
         </Button>
      </View>
    )

}

组件 2：

export default class SecondScreen extends React.Component {

    constructor() {
      super();
      this.state = {some : ''}

     }

    async getValue () {
    let recievedValue = '';
    try {
      let promise = await AsyncStorage.getItem('value') || 'cheeseCake';
      promise.then((value) => recievedValue = value) 
    } catch (error) {
      // Error retrieving data
      console.log(error.message);
    }

    return recievedValue
  }

   render() {



    var value= this.getValue();

    return (
      <View style={styles.container}>
        <Text>
             HERE CHANGED VALUE: {value}                                                              
         </Text>
        <Button onPress={()=> this.setState((prev)=> {some:'Thing'})}>    
         </Button>
      </View>
    )

}

当我按下屏幕 1（主屏幕）上的按钮时，值被保存。但它仅在我通过 Button Press 触发状态更改时显示在第二个屏幕中。

通过导航栏访问屏幕时如何渲染屏幕？ 在此处输入图像描述

标签： react-native

解决方案

你试过了EventEmiter吗？

使用这个自定义事件监听器：https ://github.com/meinto/react-native-event-listeners

例如：

import { EventRegister } from 'react-native-event-listeners'

/*
 * RECEIVER COMPONENT
 */
class Receiver extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            data: 'no data',
        }
    }

    componentWillMount() {
        this.listener = EventRegister.addEventListener('myCustomEvent', (data) => {
            this.setState({
                data,
            })
        })
    }

    componentWillUnmount() {
        EventRegister.removeEventListener(this.listener)
    }

    render() {
        return <Text>{this.state.data}</Text>
    }
}

/*
 * SENDER COMPONENT
 */
const Sender = (props) => (
    <TouchableHighlight
        onPress={() => {
            EventRegister.emit('myCustomEvent', 'it works!!!')
        })
    ><Text>Send Event</Text></TouchableHighlight>
)

推荐阅读