像过渡一样反应导航滚动视图？

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

像过渡一样反应导航滚动视图？

React Navigation Scroll View like transition?

reactjs

react-native

react-navigation

更新