[英]React Native swiper not working in StackNavigator for IOS
In my app, I have Login Screen , ForgotPassword Screen and SignUp Screen .在我的应用程序中,我有Login Screen 、 ForgotPassword Screen和SignUp Screen 。 In SignUp Screen I have used react-native-swiper to displays three step's slides of signup process.
在注册屏幕中,我使用了react-native-swiper来显示注册过程的三个步骤的幻灯片。 And I have wrap-up these screens in StackNavigator and render this StackNavigator as a root component in my App.js .
我在StackNavigator中封装了这些屏幕,并将这个StackNavigator渲染为我的App.js中的根组件。
Here is my StackNavigator :这是我的StackNavigator :
Router.js路由器.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
App.js应用程序.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
SignUp.js注册.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>
}
}
But, the problem is that when I navigate from Login screen to SignUp screen using this.props.navigation.navigate('SignUp')
, Swiper componen not displaying anything in SignUp screen.但是,问题是当我使用
this.props.navigation.navigate('SignUp')
从登录屏幕导航到注册屏幕时, Swiper组件在注册屏幕中没有显示任何内容。 It just blank.它只是空白。 For android it working properly, For IOS it is not working.
对于android它可以正常工作,对于IOS它不工作。
And another thing to note is that If I just render SignUp screen as a root in App.js then it is working properly.另外需要注意的是,如果我只是将注册屏幕呈现为App.js中的根,那么它可以正常工作。
And also If I set SignUp screen as a initial screen in my StackNavigator then also it's working.而且,如果我在StackNavigator中将注册屏幕设置为初始屏幕,那么它也可以正常工作。
Please anyone help me what's going wrong here ?请任何人帮助我这里出了什么问题?
I Have found the solution.我找到了解决方案。
Add removeClippedSubviews={false}
props to swiper.将 removeClippedSubviews
removeClippedSubviews={false}
道具添加到 swiper。 Then It will work.然后它将起作用。
If Swiper isn't working use these props如果 Swiper 不起作用,请使用这些道具
removeClippedSubviews={false}
scrollEnabled={true}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.