Question

我刚刚开始在iOS模拟器上的React Native中进行开发。我可以从一个页面导航到另一个页面，但是当我按下“后退”按钮将用户带到上一页时，它可以工作，但是没有默认的iOS过渡样式。

import React, {Component} from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import { Icon,Container, Header, Content, List, ListItem, Thumbnail, Text, Left, Body, Right, Button } from 'native-base';


class NewScreen extends Component{
  render() {
    return (
        <Container>
            <Header>
                <Left>
                    <Icon  name="arrow-back" onPress={() =>
                  this.props.navigation.goBack()}/>
                </Left>
            </Header>
            <Content>
            </Content>
        </Container>

Answer 1

您可以在导航选项中使用下面的代码来实现从左到右和从右到左的屏幕转换；对于其他幻灯片过渡样式，您可以根据需要进行搜索和更好地放置：

Router = StackNavigator({ Login: { screen: LoginScreen, },  Avatars: { screen: AvatarsScreen, } }, {
initialRouteName: 'Login',
headerMode: 'none',
transitionStyle: 'default',
navigationOptions: {
  headerTintColor: 'blue',
  gesturesEnabled: false,
  gesturesDirection: 'default',

},
transitionConfig: (sceneProps) => ({
  screenInterpolator: sceneProps => {
    if (sceneProps.scene.route.params != undefined && sceneProps.scene.route.params.footer == true) {
      //console.log("78 ", sceneProps);
    }
    else {
      const { layout, position, scene } = sceneProps;
      const { index } = scene;

      const translateX = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [layout.initWidth, 0, 0]
      });

      const opacity = position.interpolate({
        inputRange: [
          index - 1,
          index - 0.99,
          index,
          index + 0.99,
          index + 1
        ],
        outputRange: [0, 1, 1, 0.3, 0]
      });

      return { opacity, transform: [{ translateX }] };
    }
  }
}),

} ）

返回上一页有效，但没有带有react-native的动画

1 个答案: