Javascript 反应导航：自底向上转换

我在react原生项目中使用，以便处理导航和路线

在我的例子中，我有一个

ViewA

和一个

ViewB

ViewA

需要我在

ViewB

中填写的信息

用户流是

ViewA

->

ViewB

->

ViewA

** VIEW A **
import React from "react";
import { Button, Text, View } from "react-native";

class ViewA extends React.Component {
  state = { selected: false };

  onSelect = data => {
    this.setState(data);
  };

  onPress = () => {
    this.props.navigate("ViewB", { onSelect: this.onSelect });
  };

  render() {
    return (
      <View>
        <Text>{this.state.selected ? "Selected" : "Not Selected"}</Text>
        <Button title="Next" onPress={this.onPress} />
      </View>
    );
  }
}

**查看A**
从“React”导入React；
从“react native”导入{按钮、文本、视图}；
类ViewA扩展了React.Component{
状态={selected:false}；
onSelect=data=>{
此设置状态（数据）；
};
onPress=（）=>{
this.props.navigate（“ViewB”，{onSelect:this.onSelect}）；
};
render（）{
返回(
{this.state.selected？“selected”：“notselected”}
);
}
}

**视图B**
从“React”导入React；
从“react native”导入{Button}；
类ViewB扩展了React.Component{
戈巴克（）{
const{navigation}=this.props；
navigation.goBack（）；
navigation.state.params.onSelect（{selected:true}）；
}
render（）{
返回；
}
}

我想做的是：不要从左到右打开我的

ViewB

，我希望它从下到上（“在视图a上方”）打开，并有一个紧密的“上-下”过渡。比如情态动词

我的问题是，我想保持StackNavigator的现状。并希望自定义此转换

我不想要模态

---

感谢您的时间和帮助

请确保在页面顶部导入此内容

import CardStackStyleInterpolator from "react-navigation/src/views/CardStack/CardStackStyleInterpolator";

对于简单的转换，这就是导航器的外观

StackNavigator(
 {
   Scenes...
 },
 {
   transitionConfig: () => ({
     screenInterpolator: props => {

       // Basically you need to create a condition for individual scenes
       if (props.scene.route.routeName === 'NameOfOneScene') {

         // forVertical makes the scene transition for Top to Bottom
         return CardStackStyleInterpolator.forVertical(props);
       }

       const last = props.scenes[props.scenes.length - 1];

       // This controls the transition when navigation back toa specific scene
       if (last.route.routeName === 'NameOfOneScene') {

         // Here, forVertical flows from Top to Bottom
         return CardStackStyleInterpolator.forVertical(props);
       }

       This declares the default transition for every other scene
       return CardStackStyleInterpolator.forHorizontal(props);
    },
    navigationOptions: { 
      ... 
    },
    cardStyle: {
      ...
    }
 }

你看过报纸了吗？

StackNavigator(
 {
   Scenes...
 },
 {
   transitionConfig: () => ({
     screenInterpolator: props => {

       // Basically you need to create a condition for individual scenes
       if (props.scene.route.routeName === 'NameOfOneScene') {

         // forVertical makes the scene transition for Top to Bottom
         return CardStackStyleInterpolator.forVertical(props);
       }

       const last = props.scenes[props.scenes.length - 1];

       // This controls the transition when navigation back toa specific scene
       if (last.route.routeName === 'NameOfOneScene') {

         // Here, forVertical flows from Top to Bottom
         return CardStackStyleInterpolator.forVertical(props);
       }

       This declares the default transition for every other scene
       return CardStackStyleInterpolator.forHorizontal(props);
    },
    navigationOptions: { 
      ... 
    },
    cardStyle: {
      ...
    }
 }