我想在我的新反应本机应用程序中使用React Navigation但是我可以在几个地方自定义它们,并且文档在这个主题中没有帮助 . 有人试过吗?在哪里我能看到一个有效的例子?提前致谢 .
你可以在this link找到这篇文章的详细版本
我希望这对于如何创建自定义转换具有足够的清晰度 .
创建场景或两个以进行导航
class SceneOne extends Component { render() { return ( <View> <Text>{'Scene One'}</Text> </View> ) } } class SceneTwo extends Component { render() { return ( <View> <Text>{'Scene Two'}</Text> </View> ) } }
声明您的应用场景
let AppScenes = { SceneOne: { screen: SceneOne }, SceneTwo: { screen: SceneTwo }, }
声明自定义转换
let MyTransition = (index, position) => { const inputRange = [index - 1, index, index + 1]; const opacity = position.interpolate({ inputRange, outputRange: [.8, 1, 1], }); const scaleY = position.interpolate({ inputRange, outputRange: ([0.8, 1, 1]), }); return { opacity, transform: [ {scaleY} ] }; };
声明自定义转换配置器
let TransitionConfiguration = () => { return { // Define scene interpolation, eq. custom transition screenInterpolator: (sceneProps) => { const {position, scene} = sceneProps; const {index} = scene; return MyTransition(index, position); } } };
使用Stack Navigator创建应用程序导航器
const AppNavigator = StackNavigator(AppScenes, { transitionConfig: TransitionConfiguration });
在项目中使用App Navigator
class App extends Component { return ( <View> <AppNavigator /> </View> ) }
在eq中注册您的应用程序 . index.ios.js
index.ios.js
import { AppRegistry } from 'react-native'; AppRegistry.registerComponent('MyApp', () => App);
至于如何设置每个场景的转换的问题,我就是这样做的 .
当您使用 react-navigation 中的 NavigationActions 进行导航时,您可以传递一些道具 . 就我而言,它看起来像这样
react-navigation
NavigationActions
this.props.navigate({ routeName: 'SceneTwo', params: { transition: 'myCustomTransition' } })
然后在Configurator中你可以像这样在这些转换之间切换
let TransitionConfiguration = () => { return { // Define scene interpolation, eq. custom transition screenInterpolator: (sceneProps) => { const {position, scene} = sceneProps; const {index, route} = scene const params = route.params || {}; // <- That's new const transition = params.transition || 'default'; // <- That's new return { myCustomTransition: MyCustomTransition(index, position), default: MyTransition(index, position), }[transition]; } } };
1 回答
你可以在this link找到这篇文章的详细版本
我希望这对于如何创建自定义转换具有足够的清晰度 .
创建场景或两个以进行导航
声明您的应用场景
声明自定义转换
声明自定义转换配置器
使用Stack Navigator创建应用程序导航器
在项目中使用App Navigator
在eq中注册您的应用程序 .
index.ios.js
更新#1
至于如何设置每个场景的转换的问题,我就是这样做的 .
当您使用
react-navigation
中的NavigationActions
进行导航时,您可以传递一些道具 . 就我而言,它看起来像这样然后在Configurator中你可以像这样在这些转换之间切换