javascript - react-native Swiper 在模态中是空白的

Question

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

哪个操作系统？

安卓

版本

您使用的是哪些版本：

• react-native-swiper v1.5.13？
• 反应原生 v0.51.0

实际行为

我在里面显示了一个带有 swiper 的 Modal。我得到一个空白显示，只有刷卡器的按钮，而不是内容

预期行为

在模态框内显示滑动条的内容

如何重现它>

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

在小吃里试试 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. 点击按钮“x modal”

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>