React Native swiper 在 iOS 的 StackNavigator 中不起作用

Question

在我的應用程序中，我有Login Screen 、 ForgotPassword Screen和SignUp Screen 。 在注冊屏幕中，我使用了react-native-swiper來顯示注冊過程的三個步驟的幻燈片。 我在StackNavigator中封裝了這些屏幕，並將這個StackNavigator渲染為我的App.js中的根組件。

這是我的StackNavigator ：

路由器.js

import { createDrawerNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
import Login from './src/containers/Login';
import SignUp from './src/containers/SignUp';
import ForgotPassword from './src/containers/ForgotPassword';

const AuthStackNavigator = createStackNavigator({
    Login: {
        screen: Login
    },
    ForgotPassword: {
        screen: ForgotPassword
    },
    SignUp: {
        screen: SignUp
    },
});

const Router = createAppContainer(AuthStackNavigator)

export default Router

應用程序.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import configureStore from './src/store/configureStore';
import Router from './Router';

const store = configureStore()

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Router />
            </Provider>            
        );
    }
}

export default App

注冊.js

import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity, KeyboardAvoidingView, Platform, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';
import Colors from '../../config/Colors';
import Logo from '../components/Logo';
import MText from '../components/MText';
import StepButton from '../components/StepButton';
import SignUpStepOne from './SignUpStepOne';
import SignUpStepTwo from './SignUpStepTwo';
import SignUpStepThree from './SignUpStepThree';

class SignUp extends Component {

  static navigationOptions = ({navigation}) => ({
    header: null
  });

  constructor(props) {
    super(props);
    this.state = {
      activeStep: 0
    };
  }

  slideToNext = () => {
    this.swiper.scrollBy(1, true);
    this.setState(prevState => ({
      activeStep: prevState.activeStep + 1
    }))
  }

  slideToPrev = () => {
    this.setState(prevState => ({
      activeStep: prevState.activeStep - 1
    }), () => {
      this.swiper.scrollBy(-1, true);
    })
  }

  render() {
      <KeyboardAvoidingView style={styles.container} behavior="padding">
        <View style={{ flex: 1, paddingHorizontal: 10 }}>

          <Logo />

          <Swiper
            style={{
              
            }}
            ref={(swiper) => { this.swiper = swiper; }} 
            containerStyle={{ flex: 1 }}
            showsButtons={false}
            showsPagination={false}
            loop={false}
            scrollEnabled={false}
            onIndexChanged={(activeStep) => {
              this.setState({
                activeStep
              })
            }}
          >
            <SignUpStepOne onNext={this.slideToNext} />
            <SignUpStepTwo onNext={this.slideToNext} onPrev={this.slideToPrev} />
            <SignUpStepThree onNext={this.slideToNext} onPrev={this.slideToPrev} />
          </Swiper>

        </View>
      </KeyboardAvoidingView>
  }
}

但是，問題是當我使用this.props.navigation.navigate('SignUp')從登錄屏幕導航到注冊屏幕時， Swiper組件在注冊屏幕中沒有顯示任何內容。 它只是空白。 對於android它可以正常工作，對於IOS它不工作。

另外需要注意的是，如果我只是將注冊屏幕呈現為App.js中的根，那么它可以正常工作。

而且，如果我在StackNavigator中將注冊屏幕設置為初始屏幕，那么它也可以正常工作。

請任何人幫助我這里出了什么問題？

Answer 1

我找到了解決方案。

將 removeClippedSubviews removeClippedSubviews={false}道具添加到 swiper。 然后它將起作用。

Answer 2

如果 Swiper 不起作用，請使用這些道具

removeClippedSubviews={false}
scrollEnabled={true}