React-native의 다른 구성 요소에서 한 구성 요소의 상태 변경

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> 
     ); 
    } 
}