小编Jud*_* M.的帖子

我有一个带主屏幕的应用程序，在这个屏幕上我正在渲染一个打开的模态button press，在Modal我有一个按钮应该将我导航到另一个屏幕，它导航正确但是当我导航到另一个屏幕时，模态没有没有消失，怎么隐藏？

添加代码进行演示

家：

import React, { Component } from 'react';
import Modal from './Modal';

class Home extends Component {
  state = {
    isModalVisible: false
  };

  toggleModal = () =>
    this.setState({ isModalVisible: !this.state.isModalVisible });

  render() {
    const { navigate } = this.props.navigation;

    <Modal
    visible={this.state.isModalVisible}
    navigation={this.props.navigation}
    />
    );
  }
}

export default Home;

模态：

import React, { Component } from "react";
import Modal from "react-native-modal";

class Modal extends Component { …

我可以在不扭曲图像的情况下实现这种效果吗？我尝试使用CSS的倾斜效果，但它以某种方式旋转图像并裁剪它的一半，我希望它保持原样，大小相同，但边缘像附加的图像一样，这是我的代码:

div.skewed {
  position: relative;
  height: 140px;
  transform: skew(-2deg) rotate(2deg);
  -webkit-transform: skew(-2deg) rotate(2deg);
  -moz-transform: skew(-2deg) rotate(2deg);
  overflow: hidden;
}

div.skewed > * {
  width: 110%;
  position: absolute;
  top: 50%;
  transform: skew(2deg) rotate(-2deg) translateY(-50%);
  -webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
  -moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}

<div class="skewed">
  <img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">
</div>

I have segments and I want them to act as tabs. I tried using react-navigation onPress of each segment but it doesn't look nice.

I want the segments to stay fixed at the top and on clicking each one the content should change or call a specific component without reloading or noticing that the screen has changed.

<Segment>
  <Button first>
    <Text>Puppies</Text>
   </Button>
   <Button>
    <Text>Kittens</Text>
    </Button>
    <Button last active>
      <Text>Cubs</Text>
    </Button>
</Segment>
<Content>
  <Text>Awesome segment</Text>
</Content>