React native 反应导航：禁用模态动画

是否可以禁用React导航的模式动画

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const params = navigation.state.params || {};

    return {
      headerLeft: (
        <Button
          onPress={() => navigation.navigate('MyModal')}
          title="Info"
          color="#fff"
        />
      ),
      /* the rest of this config is unchanged */
    };
  };

  /* render function, etc */
}

class ModalScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{ fontSize: 30 }}>This is a modal!</Text>
        <Button
          onPress={() => this.props.navigation.goBack()}
          title="Dismiss"
        />
      </View>
    );
  }
}

const MainStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    /* Same configuration as before */
  }
);

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack,
    },
    MyModal: {
      screen: ModalScreen,
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
);

类主屏幕扩展React.Component{
静态导航选项=（{navigation}）=>{
const params=navigation.state.params | |{}；
返回{
左校长：(
navigation.navigate（'MyModal'）}
title=“Info”
color=“#fff”
/>
),
/*此配置的其余部分保持不变*/
};
};
/*渲染功能等*/
}
类ModalScreen扩展了React.Component{
render（）{
返回(
这是一个模态！
this.props.navigation.goBack（）}
title=“解雇”
/>
);
}
}
const MainStack=createStackNavigator(
{
主页：{
屏幕：主屏幕，
},
详情：{
屏幕：详细信息屏幕，
},
},
{
/*与以前相同的配置*/
}
);
const RootStack=createStackNavigator(
{
主要内容：{
屏幕：MainStack，
},
MyModal：{
屏幕：ModalScreen，
},
},
{
模式：“模态”，
headerMode:“无”，
}
);

---

示例可从React Native官方文档中获得：

这并不是您想要的，但您可以使用屏幕上呈现的内置<代码>模式组件。这样做的好处是，

模态

组件具有一个可设置为“无”以获得无动画模态的解决方案。

解决方案 使用

transitionConfig

中的

transitionSpec

进行自定义屏幕转换。并将转换持续时间设置为零。

示例（未测试）

---

您可以使用

transitionConfig

prop添加任何过渡动画。你能举个例子吗？我想删除动画，而不是添加。我不能给出一个例子，因为我在手机上，但你可以尝试将持续时间设置为0。几乎完美，只是错过了尾随的右括号。@Raptor I added.>_^只需使用

animationEnabled:false

。

const ModalNavigator = createStackNavigator(
  {
    Main: { screen: Main },
    Login: { screen: Login },
  },
  {
    headerMode: 'none',
    mode: 'modal',
    defaultNavigationOptions: {
      gesturesEnabled: false,
    },
    transitionConfig: () => ({
      transitionSpec: {
        duration: 0,
      },
    })
...