kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-02-13 09:39:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix scrolling in web examples (#8020)

Browse Source
This commit is contained in:
Evan Bacon
2020-04-30 04:06:11 -07:00
committed by Satyajit Sahoo
parent 3193a30da6
commit 1e73fed6de
6 changed files with 44 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
example/src/Screens/CompatAPI.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import { View, ScrollView, StyleSheet, Platform } from 'react-native';
import { Button } from 'react-native-paper';
import {
createCompatNavigatorFactory,
@@ -23,6 +23,8 @@ type NestedStackParams = {
Article: { author: string };
};
const scrollEnabled = Platform.select({ web: true, default: false });
const AlbumsScreen: CompatScreenType<StackNavigationProp<
CompatStackParams
>> = ({ navigation }) => {
@@ -44,7 +46,7 @@ const AlbumsScreen: CompatScreenType<StackNavigationProp<
Go back
</Button>
</View>
<Albums scrollEnabled={false} />
<Albums scrollEnabled={scrollEnabled} />
</ScrollView>
);
};
@@ -70,7 +72,7 @@ const FeedScreen: CompatScreenType<StackNavigationProp<NestedStackParams>> = ({
Go back
</Button>
</View>
<NewsFeed scrollEnabled={false} />
<NewsFeed scrollEnabled={scrollEnabled} />
</ScrollView>
);
};
@@ -100,7 +102,7 @@ const ArticleScreen: CompatScreenType<StackNavigationProp<
</View>
<Article
author={{ name: navigation.getParam('author') }}
scrollEnabled={false}
scrollEnabled={scrollEnabled}
/>
</ScrollView>
);

9
example/src/Screens/LinkComponent.tsx
View File

@@ -22,6 +22,8 @@ type SimpleStackParams = {
type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
const scrollEnabled = Platform.select({ web: true, default: false });
const LinkButton = ({
to,
...rest
@@ -78,7 +80,10 @@ const ArticleScreen = ({
Go back
</Button>
</View>
<Article author={{ name: route.params.author }} scrollEnabled={false} />
<Article
author={{ name: route.params.author }}
scrollEnabled={scrollEnabled}
/>
</ScrollView>
);
};
@@ -112,7 +117,7 @@ const AlbumsScreen = ({
Go back
</Button>
</View>
<Albums scrollEnabled={false} />
<Albums scrollEnabled={scrollEnabled} />
</ScrollView>
);
};

11
example/src/Screens/ModalPresentationStack.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { View, StyleSheet, ScrollView, Platform } from 'react-native';
import { Button } from 'react-native-paper';
import { RouteProp, ParamListBase } from '@react-navigation/native';
import {
@@ -17,6 +17,8 @@ type ModalStackParams = {
type ModalStackNavigation = StackNavigationProp<ModalStackParams>;
const scrollEnabled = Platform.select({ web: true, default: false });
const ArticleScreen = ({
navigation,
route,
@@ -42,7 +44,10 @@ const ArticleScreen = ({
Go back
</Button>
</View>
<Article author={{ name: route.params.author }} scrollEnabled={false} />
<Article
author={{ name: route.params.author }}
scrollEnabled={scrollEnabled}
/>
</ScrollView>
);
};
@@ -66,7 +71,7 @@ const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
Go back
</Button>
</View>
<Albums scrollEnabled={false} />
<Albums scrollEnabled={scrollEnabled} />
</ScrollView>
);
};

13
example/src/Screens/SimpleStack.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { View, Platform, StyleSheet, ScrollView } from 'react-native';
import { Button } from 'react-native-paper';
import { RouteProp, ParamListBase } from '@react-navigation/native';
import {
@@ -18,6 +18,8 @@ type SimpleStackParams = {
type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
const scrollEnabled = Platform.select({ web: true, default: false });
const ArticleScreen = ({
navigation,
route,
@@ -43,7 +45,10 @@ const ArticleScreen = ({
Pop screen
</Button>
</View>
<Article author={{ name: route.params.author }} scrollEnabled={false} />
<Article
author={{ name: route.params.author }}
scrollEnabled={scrollEnabled}
/>
</ScrollView>
);
};
@@ -71,7 +76,7 @@ const NewsFeedScreen = ({
Go back
</Button>
</View>
<NewsFeed scrollEnabled={false} />
<NewsFeed scrollEnabled={scrollEnabled} />
</ScrollView>
);
};
@@ -99,7 +104,7 @@ const AlbumsScreen = ({
Pop by 2
</Button>
</View>
<Albums scrollEnabled={false} />
<Albums scrollEnabled={scrollEnabled} />
</ScrollView>
);
};

9
example/src/Screens/StackHeaderCustomization.tsx
View File

@@ -20,6 +20,8 @@ type SimpleStackParams = {
type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
const scrollEnabled = Platform.select({ web: true, default: false });
const ArticleScreen = ({
navigation,
route,
@@ -45,7 +47,10 @@ const ArticleScreen = ({
Go back
</Button>
</View>
<Article author={{ name: route.params.author }} scrollEnabled={false} />
<Article
author={{ name: route.params.author }}
scrollEnabled={scrollEnabled}
/>
</ScrollView>
);
};
@@ -75,7 +80,7 @@ const AlbumsScreen = ({
Go back
</Button>
</View>
<Albums scrollEnabled={false} />
<Albums scrollEnabled={scrollEnabled} />
</ScrollView>
);
};

9
example/src/Screens/StackTransparent.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { View, StyleSheet, ScrollView, Platform } from 'react-native';
import { Button, Paragraph } from 'react-native-paper';
import { RouteProp, ParamListBase, useTheme } from '@react-navigation/native';
import {
@@ -15,6 +15,8 @@ type SimpleStackParams = {
type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
const scrollEnabled = Platform.select({ web: true, default: false });
const ArticleScreen = ({
navigation,
route,
@@ -40,7 +42,10 @@ const ArticleScreen = ({
Go back
</Button>
</View>
<Article author={{ name: route.params.author }} scrollEnabled={false} />
<Article
author={{ name: route.params.author }}
scrollEnabled={scrollEnabled}
/>
</ScrollView>
);
};