在 React-native 中从另一个组件更改一个组件的状态

Question

我有下面的代码，我希望实现的是从 TabNavigator 中的屏幕之一更改 Tabscreen 的状态。但是我目前尝试使用全局函数来设置状态的方法根本不起作用，并出现错误 undefined is not a function (evaluating 'this.setstate')

import React from 'react';
import {Image, Text, TouchableNativeFeedback, TouchableHighlight} from 'react-native';
import {TabNavigator} from 'react-navigation';
import {Container, Header, Icon, Left, Body} from 'native-base';
import Timeline from './Timeline';

const Mainscreen=TabNavigator(
  {
      Main:{
        screen: Timeline,
        navigationOptions:{
          tabBarIcon: ({tintColor}) => <Icon name='home' style={{color:tintColor}}/>
        }
      },
      Search:{
        screen: props => <Container><TouchableHighlight onPress={()=>globalStateUpdate()}><Container style={{backgroundColor:'rgba(0,132,180,0.5)'}}></Container></TouchableHighlight></Container>,
        navigationOptions:{
          tabBarIcon: ({tintColor}) => <Icon name='search' style={{color:tintColor}}/>
        }
      },
  }
);

function globalStateUpdate(){
  this.setState({
    header:<Text>Search</Text>
  });
}

class Tabscreen extends React.Component {
  constructor(props){
    super(props);
    this.state={
      header:<Text>Home</Text>
    };
    globalStateUpdate = globalStateUpdate.bind(this);
  }

  render() {
    return (
      <Container>
        <Header hasTabs >
          <Left>
            {this.state.header}
          </Left>
          <Body/>
        </Header>
        <Mainscreen/>
      </Container>
    );
  }
}

export default Tabscreen;

我该怎么做？ React-navigation 对我的应用程序非常重要，我无法删除它。我相信 Redux 可以解决这个问题，但它似乎过于复杂，只需更改一次文本，这就是我所需要的。

Answer 1

您可以将 TabScreen 中的函数传递给其他屏幕以更新 TabScreen 状态。

const Mainscreen=TabNavigator(
    {
        Main:{
            screen: Timeline,
            navigationOptions:{
                tabBarIcon: ({tintColor}) => <Icon name='home' style={{color:tintColor}}/>
            }
        },
        Search:{
            screen: props => <Container><TouchableHighlight onPress={()=> props.screenProps.globalStateUpdate({header:<Text>Search</Text>})}><Container style={{backgroundColor:'rgba(0,132,180,0.5)'}}></Container></TouchableHighlight></Container>,
            navigationOptions:{
                tabBarIcon: ({tintColor}) => <Icon name='search' style={{color:tintColor}}/>
            }
        },
    }
);


class Tabscreen extends React.Component {
    constructor(props){
        super(props);
        this.state={
            header:<Text>Home</Text>
            globalStateUpdate: newState => this.setState(newState)
        };
    }

    render() {
        return (
            <Container>
                <Header hasTabs >
                    <Left>
                        {this.state.header}
                    </Left>
                    <Body/>
                </Header>
                <Mainscreen screenProps={{globalStateUpdate: this.state.globalStateUpdate}} />
            </Container>
        );
    }
}

在 React-native 中从另一个组件更改一个组件的状态

Changing the state of one component from another component in React-native

javascript

reactjs

react-native

redux

react-navigation