如何在React Native中调用一个页面上的多个屏幕

toe95027 于 2022-12-27 发布在 React

关注(0)|答案(2)|浏览(136)

我已经做了一个主页，其中有三个按钮在标题（像一个标签导航器），我想在点击每个按钮的标题下出现一个屏幕，如下图所示：

以下是我的尝试：

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>

react-native

来源：https://stackoverflow.com/questions/63646045/how-to-call-multiple-screens-on-one-page-in-react-native

2条答案

按热度按时间

9udxz4iz1#

再见，你需要的似乎更像是一个从屏幕底部弹出的窗口。我使用react-native-popup-uiToast组件来完成这个任务。
例如：

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>

结果是：