react-native Swiper在模态

Question

我使用react-native和react-native-swiper

哪个OS？

Android

版本

您使用的是哪个版本：

• react-native-swiper v1.5.13？
• react-native v0.51.0

实际行为

我在里面显示一个带有滑块的模态。我得到一个空白的显示，只有swiper的按钮而不是内容

预期行为

在模态

中显示滑块的内容

如何重现它＆gt;

我尝试使用非常简化的代码版本重现该错误

尝试小吃 https://snack.expo.io/rk8rb3ZzM

或我的代码

        import React, { Component } from "react";
import { Text, View, Modal, Dimensions } from "react-native";
import Swiper from "react-native-swiper"; // 1.5.13
import { Button } from "react-native-elements"; // 0.18.5

import "@expo/vector-icons"; // 6.2.1

var width = Dimensions.get("window").width;
var height = Dimensions.get("window").height;

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items:[
        { title: "Hello Swiper", css: thisstyles.slide1 },
        { title: "Beautiful", css: thisstyles.slide2 },
        { title: "simple", css: thisstyles.slide3 },
        { title: "And simple", css: thisstyles.slide3 }
      ],
      modalVisible: false
    };
  }
  componentDidMount() {

  }
  // affiche / cache la modal avec l'image en plein écran
  toggleModalVisible = () => {
    this.setState({ modalVisible: !this.state.modalVisible });
  };

  // vue plein écran avec zoom sans info
  renderFullScreen() {
    if (!this.state.modalVisible) {
      return null;
    }
    return (
      <Modal
        animationType={"slide"}
        transparent={false}
        visible={this.state.modalVisible}
        onRequestClose={() => this.toggleModalVisible()}
      >
        <View style={thisstyles.modalFullScreen}>
          <Text>I have component and text here</Text>
          <Swiper style={thisstyles.wrapper} showsButtons={true}>
            {this.state.items.map((item, key) => {
              console.log("item", item);
              return (
                <View key={key} style={item.css}>
                  <Text style={thisstyles.text}>{item.title}</Text>
                </View>
              );
            })}
          </Swiper>
        </View>
      </Modal>
    );
  }

  render() {
    return (
       <Swiper style={thisstyles.wrapper} showsButtons={true}>
            {this.state.items.map((item, key) => {
              console.log("item", item);
              return (
                <View key={key} style={item.css}>
                  <Text style={thisstyles.text}>{item.title}</Text>
                  {this.renderFullScreen()}
                    <Button
                      title="modal"
                      onPress={() => this.toggleModalVisible()}
                      icon={{ name: "close", type: "font-awesome" }}
                    />
                </View>
              );
            })}
          </Swiper>

    );
  }
}

const thisstyles = {
  modalFullScreen: {
    height: height,
    width: width
  },
  wrapper: {},
  slide1: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#9DD6EB"
  },

  slide2: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#97CAE5"
  },

  slide3: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#92BBD9"
  },

  text: {
    color: "black",
    fontSize: 30,
    fontWeight: "bold"
  }
};

重现的步骤

1. 运行应用
2. 点击按钮＆＃34; x modal＆＃34;

Answer 1

我不得不延迟让我的工作，但是它确实有效！

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

  componentDidMount() {
    // Must use this 100-ms delayed swiper workaround to render on Android properly
    setTimeout(() => {
      this.setState({showSwiper: true});
    }, 100);
  }

  render() {
    var exampleSwiper = (
      <Swiper activeDotColor={'white'} loop={false} >
        <View style={{width: 100, height: 100, backgroundColor: 'white'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'white'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'white'}} />
      </Swiper>
    );
    return (
      <Modal presentationStyle={'overFullScreen'}>
        {this.state.showSwiper ? exampleSwiper : null}
      </Modal>
    );
  }

Answer 2

创建一个父 View 标签并根据您的要求设置其高度。例如：

<View style={{height:'50%'}}>
    <Swiper {....}    />
</View>