javascript - 如何在 React Native 中在一页上调用多个屏幕

Question

我制作了一个主页，其中标题中有三个按钮（如选项卡导航器）我想要点击每个按钮时出现一个屏幕出现在标题下方，如下图所示：

这是我尝试过的：

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 JSX error says "EXPECTED }"
      </View>

Answer 1

Ciao，您需要的似乎更像是从屏幕底部出现的弹出窗口。我使用react-native-popup-ui Toast组件来做到这一点。

就像是：

import { Root, Toast } from 'popup-ui'
...
<Root>
   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity
         onPress={() =>
            Toast.show({
               title: 'User created',
               text: 'Your user was successfully created, use the app now.',
               color: '#2ecc71'
            })
         }
      >
         <Text>Call Toast</Text>
      </TouchableOpacity>
    </View>
</Root>

结果是：

注意：我有 android，并且 Taost 与 android 导航栏重叠，但在 iOS 上，您应该看到所有Toast组件