【问题标题】：react-navigation: disable modal animationreact-navigation：禁用模态动画
【发布时间】：2018-12-03 03:54:55
【问题描述】：

是否可以禁用 React Navigation 的模态动画？

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 Native 官方文档：https://reactnavigation.org/docs/en/modal.html

【问题讨论】：

您可以使用transitionConfig 属性添加任何过渡动画。 Docs API
你能举个例子吗？我想删除动画，而不是添加。
我不能举个例子，因为我在手机上，但你可以尝试将持续时间设置为 0。

标签： react-native react-navigation

【解决方案1】：

解决方案

在transitionConfig 中使用transitionSpec 进行自定义屏幕转换。并将过渡持续时间设为零。 Official

示例（未测试）

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

【讨论】：

几乎完美，只是错过了结尾的右括号。
@Raptor 我添加了。 >_^
只需使用animationEnabled: false。

【解决方案2】：

这不是你想要的，但你可以使用内置的Modal 组件来渲染屏幕。这样做的好处是Modal 组件有一个animationtype prop，您可以将其设置为“none”以获得无动画模式。

【讨论】：