Question

我有一个带有带有两个屏幕的导航栏的应用程序。当我在屏幕/组件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（主屏幕）上的按钮时，将保存该值。但是它仅在我通过按钮按下触发状态更改时才显示在第二个屏幕中。

通过导航栏访问屏幕时，如何渲染屏幕？

Answer 1

您尝试过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>
)

如何从另一个独立屏幕更新“不同屏幕”？

1 个答案: