Javascript 在React native中更改一个组件与另一个组件的状态

我有下面的代码，我希望实现的是从

TabNavigator

中的一个屏幕更改

Tabscreen

的状态。但我目前尝试的方法是，用一个全局函数来设置状态，根本不起作用，错误

undefined不是一个函数（计算'this.setstate'）

从“React”导入React；
从“react native”导入{图像、文本、TouchableNativeFeedback、TouchableHighlight}；
从“反应导航”导入{TabNavigator}；
从“本机基”导入{容器、标题、图标、左侧、正文}；
从“./Timeline”导入时间线；
const Mainscreen=TabNavigator(
{
主要内容：{
屏幕：时间线，
导航选项：{
tabBarIcon:（{tintColor}）=>
}
},
搜索：{
屏幕：props=>globalStateUpdate（）}>，
导航选项：{
tabBarIcon:（{tintColor}）=>
}
},
}
);
函数globalStateUpdate（）{
这是我的国家({
标题：搜索
});
}
类Tabscreen扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
标题：主页
};
globalStateUpdate=globalStateUpdate.bind（此）；
}
render（）{
返回(
{this.state.header}
);
}
}
导出默认选项卡屏幕；

---

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

您可以将函数从

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

const Mainscreen=TabNavigator(
{
主要内容：{
屏幕：时间线，
导航选项：{
tabBarIcon:（{tintColor}）=>
}
},
搜索：{
screen:props=>props.screenProps.globalStateUpdate（{header:Search}）}>,，
导航选项：{
tabBarIcon:（{tintColor}）=>
}
},
}
);
类Tabscreen扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
标题：主页
globalStateUpdate:newState=>this.setState（newState）
};
}
render（）{
返回(
{this.state.header}
);
}
}

Try

然后在屏幕对象的选项卡navigator内，Try

onPress={props.globalStateUpdate}

-如果不是这样，我道歉，在本地复制代码之前先尝试一下问题。@Dan谢谢你的回复，这样做会删除错误，但文本仍然没有更改。您需要将构造函数更改为

this.globalStateUpdate=globalStateUpdate.bind（this）

然后

-下面是一个使用React@Dan的示例，它不起作用，它给我一个类似于上次的错误。

被选为语法错误，所以我将其更改为

。代码的其余部分与您所做的完全相同。现在，它给出了错误

未定义不是一个函数（评估'props.globalStateUpdate'）

。你能帮个忙吗？好的，如果我们通过屏幕上的道具来传递状态，也许我会接受道具。我已经更新了我的代码。请查收。

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