Skip to content

B
banma_credit
Commit d36685e1 by leiyongsheng
Options

添加tab navigation

parent a719c19d
Showing with 252 additions and 4 deletions
index.js
...@@ -9,6 +9,6 @@ import { name as appName } from './app.json'; ...@@ -9,6 +9,6 @@ import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, (props) => { AppRegistry.registerComponent(appName, (props) => {
console.log('AppRegistry.registerComponent:' + props); console.log('AppRegistry.registerComponent:' + props);
return App; // return App;
// return NavigateEntryTest; return NavigateEntryTest;
}); });
package.json
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
}, },
"dependencies": { "dependencies": {
"@react-native-community/masked-view": "^0.1.10", "@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.8.0",
"@react-navigation/native": "^5.7.3", "@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0", "@react-navigation/stack": "^5.9.0",
"bufferutil": "^4.0.1", "bufferutil": "^4.0.1",
......
src/assets/images/index.js
export const IC_LAUNCHER = require('../images/ic_launcher.png') export const IC_LAUNCHER = require('../images/ic_launcher.png')
export const IC_WARN = require('../images/ic_warn.png')
src/test/NavigateEntryTest.js
import 'react-native-gesture-handler'; import 'react-native-gesture-handler';
import * as React from 'react'; import * as React from 'react';
import {
View,
Text,
Button,
Image,
ScrollView,
} from 'react-native';
import { IC_LAUNCHER, IC_WARN } from '../assets/images'
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
export default function NavigateEntryTest() { function LogoTitle(props) {
return ( return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer> <View style={{ flex: 1, height: 50, flexDirection: "row", alignItems: "center", backgroundColor: '#f4511e', }}>
{/* <Text style={{ width: 50, height: 50 }}>Close</Text> */}
<ScrollView style={{ flex: 1 }}>
{/* <Text style={{ flex: 1, fontWeight: 'bold', fontSize: 16, color: "#fff" }}>{props.children}</Text> */}
<Text style={{ flex: 1, fontWeight: 'bold', fontSize: 16, color: "#fff" }}>{JSON.stringify(props)}</Text>
</ScrollView>
<Image
style={{ width: 50, height: 50 }}
source={IC_LAUNCHER}
/>
</View>
);
}
function Feed({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Feed</Text>
<Button
title="Go to tab Messages"
onPress={() => navigation.navigate('Messages')}
/>
</View>
)
}
function Messages({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Messages</Text>
<Button
title="Go to tab Feed"
onPress={() => navigation.navigate('Feed')}
/>
<Button
style={{ margin: 10 }}
title="Go to Details"
onPress={() => navigation.navigate('Details', {
itemId: 899,
otherParam: 'anything you want here',
})}
/>
</View>
)
}
function TabHome() {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Feed') {
iconName = IC_LAUNCHER;
} else if (route.name === 'Messages') {
iconName = IC_WARN;
}
// You can return any component that you like here!
return <Image
style={{ width: 50, height: 50 }}
source={iconName}
/>
},
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}}>
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Messages" component={Messages} options={{ tabBarBadge: 3 }} />
</Tab.Navigator>
);
}
class HomeScreen extends React.Component {
componentDidMount() {
this.props.navigation.setParams({
itemId: 87,
otherParam: 'anything you want setParams here '
})
console.log('HomeScreen componentDidMount:' + JSON.stringify(this.props.route.params));
}
componentWillUnmount() {
console.log('HomeScreen componentWillUnmount:' + JSON.stringify(this.props.route.params));
}
render() {
console.log('HomeScreen path:' + this.props.path);
const { itemId } = this.props.route.params;
const { otherParam } = this.props.route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
<Button
style={{ margin: 10 }}
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
})}
/>
<Button
title="Go tab home"
onPress={() => this.props.navigation.navigate('TabHome')}
/>
<Button
title="Go tab home message"
onPress={() => this.props.navigation.navigate('TabHome', { screen: 'Messages' })}
/>
<Button
title="Go back"
onPress={() => this.props.navigation.goBack()}
/>
<Button
title="Update the title"
onPress={() => this.props.navigation.setOptions({ title: 'Updated!' })}
/>
<Text style={{ margin: 10 }}>result data: {this.props.route.params?.post}</Text>
</View>
);
}
}
function DetailsScreen({ route, navigation }) {
const [count, setCount] = React.useState(0);
/* 1. Set title button */
// React.useLayoutEffect(() => {
// navigation.setOptions({
// headerRight: () => (
// <Button onPress={() => setCount(c => c + 1)} title="Update count" />
// ),
// });
// }, [navigation, setCount]);
/* 2. Get the param */
const { itemId } = route.params;
const { otherParam } = route.params;
console.log('DetailsScreen navigation:' + JSON.stringify(navigation));
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Count: {count}</Text>
<Text>Details Screen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
<Button
style={{ margin: 10 }}
title="Go to Home"
onPress={() => navigation.navigate('Home', { post: "postText" })}
/>
<Button
style={{ margin: 10 }}
title="Go to Details... again"
onPress={() => navigation.navigate('Details')}
/>
<Button
style={{ margin: 10 }}
title="Push to Details... again"
onPress={() => navigation.push('Details')}
/>
<Button
title="Go back"
onPress={() => navigation.goBack()}
/>
<Button
title="Go back to first screen in stack"
onPress={() => navigation.popToTop()}
/>
</View>
);
}
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
export default function NavigateEntryTest(props) {
var someData = { a: 111 };
console.log('NavigateEntryTest path:' + props.path);
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home"
screenOptions={{
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<Stack.Screen name="Home" initialParams={{ itemId: 42 }}
options={{
headerTitleStyle: {
alignSelf: "center"
},
}}>
{props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>
<Stack.Screen
name="TabHome"
component={TabHome}
options={{ title: 'tabhome' }}
/>
{/* <Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'home' }}
/> */}
<Stack.Screen
name="Details"
component={DetailsScreen}
// options={{
// headerStyle: { padding: 0, margin: 0, flex: 1, marginEnd: 0 },
// headerTitle: props => <LogoTitle {...props} />,
// headerLeft: null,
// headerRight: null
// }}
options={({ navigation, route }) => ({
headerTitle: props => <LogoTitle {...props} route={route} navigation={navigation} />,
headerLeft: null,
headerRight: null
})}
// options={({ route }) => ({ title: route.params.name })}
/>
</Stack.Navigator>
</NavigationContainer>
); );
} }
\ No newline at end of file
yarn.lock
...@@ -1174,6 +1174,14 @@ ...@@ -1174,6 +1174,14 @@
resolved "https://registry.npm.taobao.org/@react-native-community/masked-view/download/@react-native-community/masked-view-0.1.10.tgz#5dda643e19e587793bc2034dd9bf7398ad43d401" resolved "https://registry.npm.taobao.org/@react-native-community/masked-view/download/@react-native-community/masked-view-0.1.10.tgz#5dda643e19e587793bc2034dd9bf7398ad43d401"
integrity sha1-XdpkPhnlh3k7wgNN2b9zmK1D1AE= integrity sha1-XdpkPhnlh3k7wgNN2b9zmK1D1AE=
"@react-navigation/bottom-tabs@^5.8.0":
version "5.8.0"
resolved "https://registry.npm.taobao.org/@react-navigation/bottom-tabs/download/@react-navigation/bottom-tabs-5.8.0.tgz#d7386809bceeead0adcaacf61b6563be9cefd5cb"
integrity sha1-1zhoCbzu6tCtyqz2G2Vjvpzv1cs=
dependencies:
color "^3.1.2"
react-native-iphone-x-helper "^1.2.1"
"@react-navigation/core@^5.12.3": "@react-navigation/core@^5.12.3":
version "5.12.3" version "5.12.3"
resolved "https://registry.npm.taobao.org/@react-navigation/core/download/@react-navigation/core-5.12.3.tgz#0484fcca290569a0dc10b70b99f00edd3f1fd93c" resolved "https://registry.npm.taobao.org/@react-navigation/core/download/@react-navigation/core-5.12.3.tgz#0484fcca290569a0dc10b70b99f00edd3f1fd93c"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment