React-nativeの別のコンポーネントから1つのコンポーネントの状態を変更する

Question

私は以下のコードを持っています。のいずれかの画面から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; 

私はこれをどのように行うことができますと、動作しませんか？リアクションナビゲーションは私のアプリケーションにとって非常に重要であり、私はそれを取り除くことができません。私は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> 
     ); 
    } 
}