React Navigation Scroll View转换过程？

Question

我想做类似的事情：

这可能吗？

默认值如下：

感谢。

Answer 1

我相信你展示的两种效果是一样的。唯一的区别是所需的导航栏顶部有导航栏，其动画看起来就像栏杆静止而其上的文字发生了变化。你在示例中添加了一个导航栏，你会发现它们是相同的。

更新

以下代码实现了视觉效果。请注意，我使用的是TabNavigator而不是StackNavigator：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const InitialScreen = (props) =>
  <View style={[styles.container, { backgroundColor: 'gray' }]}>
    <TouchableOpacity onPress={() => props.navigation.navigate('Final')}>
      <Text>Initial Screen</Text>
    </TouchableOpacity>
  </View>;
const FinalScreen = (props) =>
  <View style={[styles.container, { backgroundColor: 'pink' }]}>
    <TouchableOpacity onPress={() => props.navigation.navigate('Initial')}>
      <Text>Final Screen</Text>
    </TouchableOpacity>
  </View>;

const App = TabNavigator({
  Initial: { screen: InitialScreen },
  Final: { screen: FinalScreen },
}, {
  animationEnabled: true,
  navigationOptions: {
    tabBarVisible: false,
  },
});

AppRegistry.registerComponent('testTransition', () => App);

将它放在你的index.ios.js中进行试用并玩弄它：P