在 React Native 中导航到同一页面内的不同屏幕

Question

我制作了一个主屏幕，其中我在 header 中添加了三个按钮，按下时我想分别打开三个不同的屏幕，但它不起作用。这是我尝试过的：

 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>

Answer 1

第一个问题是你有一个 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>
    );
  }
}

在 React Native 中导航到同一页面内的不同屏幕

Natigate to different screes within same page in React Native

javascript

reactjs

react-native

react-native-android