Javascript 在React Native中，将本地网关连接到同一页面中的不同SCREE

我已经做了一个主屏幕，其中我在标题中添加了三个按钮，按下后我想分别打开三个不同的屏幕，但它不工作。 以下是我尝试过的：

 constructor(props) {
    super(props);
    this.state = {
      initialstate: 0, //Setting initial state for screens
    };
  }
 render(){
        return(
            <View style={styles.container}>
      <TouchableOpacity  onPress={() => this.setState({ initialstate: 0})}>
      <Image source={require('../../assets/add.png')}
            resizeMode="contain"/>
      </TouchableOpacity>

      <TouchableOpacity  onPress={() => this.setState({ cardstate: 1})}>
      <Image source={require('../../assets/request.png')}
            resizeMode="contain"/>
      </TouchableOpacity>

      <TouchableOpacity  onPress={() => this.setState({ cardstate: 2})}>
      <Image source={require('../../assets/send.png')}
            resizeMode="contain"/>
      </TouchableOpacity>
 
      {this.state.initialstate == 0 ? ( <RequestComp/> ) : ( <TopUpComp/> )  } //Over Here when I use the Third Screen like " : <SendComp/> " it gives me JXS error says "EXPECTED }"
      </View>

构造函数（道具）{
超级（道具）；
此.state={
initialstate:0，//设置屏幕的初始状态
};
}
render（）{
返回(
this.setState（{initialstate:0}）}>
this.setState（{cardstate:1}）}>
this.setState（{cardstate:2}}>
{this.state.initialstate==0？（）：（）}//在这里，当我使用第三个屏幕时，如“：”它给我JXS错误，显示“预期的}”

第一个问题是，您有一个仅由第一个按钮更新的

initialState

状态变量，另外两个正在设置

cardState

，因此即使三元语句的格式正确，它也不会以任何方式工作

但是除了这个问题，我不建议你在做什么的时候使用三元组，因为条件变得很难理解

有多种方法可以做到这一点，但我喜欢这里接受答案的方法）。其思想是创建一个对象，该对象保存字符串到组件的映射。然后可以基于当前键值有条件地呈现项

下面是一个示例，说明如何重构代码以使用此方法：

const tabComponents = {
  request: <RequestComp />,
  topUp: <TopUpComp />,
  send: <SendComp />,
};

class CustomTabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cardstate: 'request', // Setting initial state for screens
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={() => this.setState({ cardstate: 'request' })}>
          // Button content...
        </TouchableOpacity>

        <TouchableOpacity onPress={() => this.setState({ cardstate: 'topUp' })}>
          // Button content...
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => this.setState({ cardstate: 'send' })}>
          // Button content...
        </TouchableOpacity>
        {tabComponents[this.state.cardstate]}
      </View>
    );
  }
}

const tabComponents={
请求：，
加满：，
发送：，
};
类CustomTabs扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
cardstate:'请求'，//设置屏幕的初始状态
};
}
render（）{
返回(
this.setState（{cardstate:'request'}）}>
//按钮内容。。。
this.setState（{cardstate:'toup'}）}>
//按钮内容。。。
this.setState（{cardstate:'send'}）}>
//按钮内容。。。
{tabComponents[this.state.cardstate]}
);
}
}

您可以为此尝试选项卡导航。你可以找到这个例子，我熟悉TabNavigator，但我想做如上所述的事情，你能帮我吗？好的，我有这个想法，但是你初始化的“tabComponents”在印刷机上不起作用。