首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在react native中的另一个视图上呈现局部视图

如何在react native中的另一个视图上呈现局部视图
EN

Stack Overflow用户
提问于 2019-11-03 07:54:52
回答 2查看 731关注 0票数 0

当我在renderMoreView函数中尝试警报(“Hi”)时,它实际上是有效的,但显示视图是我面临的问题

代码语言:javascript
复制
export default class Home extends Component {
  state = {
    moreButton: false,
  };

  renderMoreView = () => {
    return (
      <View style={{flex: 1, height: 50, width: 50}}>
        <Text>Hi</Text>
      </View>
    );
  };

  render () {
    return (
      <View>
        .....
        <TouchableOpacity
          underlayColor="transparent"
          onPress={() => this.setState ({moreButton: true})}
        >
          <Feather name="more-vertical" size={25} />
        </TouchableOpacity>

        ...
        {this.state.moreButton ? this.renderMoreView () : null}
      </View>
    );
  }
}

This is what I am trying to do]

EN

回答 2

Stack Overflow用户

发布于 2019-11-05 22:37:45

如果我没理解错你的问题,你可以使用Modal组件。https://facebook.github.io/react-native/docs/modal

票数 0
EN

Stack Overflow用户

发布于 2019-11-05 23:22:47

这可以使用modal来完成。但是如果你想做的更简单,安装并使用这个模块。react-native-awesome-alerts

  1. $ npm i react-native-awesome-alerts --save

示例

代码语言:javascript
复制
import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';

import AwesomeAlert from 'react-native-awesome-alerts';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { showAlert: false };
  };

  showAlert = () => {
    this.setState({
      showAlert: true
    });
  };

  hideAlert = () => {
    this.setState({
      showAlert: false
    });
  };

  render() {
    const {showAlert} = this.state;

    return (
      <View style={styles.container}>

        <Text>I'm AwesomeAlert</Text>
        <TouchableOpacity onPress={() => {
          this.showAlert();
        }}>
          <View style={styles.button}>
            <Text style={styles.text}>Try me!</Text>
          </View>
        </TouchableOpacity>

        <AwesomeAlert
          show={showAlert}
          showProgress={false}
          title="AwesomeAlert"
          message="I have a message for you!"
          closeOnTouchOutside={true}
          closeOnHardwareBackPress={false}
          showCancelButton={true}
          showConfirmButton={true}
          cancelText="No, cancel"
          confirmText="Yes, delete it"
          confirmButtonColor="#DD6B55"
          onCancelPressed={() => {
            this.hideAlert();
          }}
          onConfirmPressed={() => {
            this.hideAlert();
          }}
        />
      </View>
    );
  };
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  button: {
    margin: 10,
    paddingHorizontal: 10,
    paddingVertical: 7,
    borderRadius: 5,
    backgroundColor: "#AEDEF4",
  },
  text: {
    color: '#fff',
    fontSize: 15
  }
});

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58676308

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档