usb加密狗破解软件

$ yarn add @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
复制代码配置
为了完成 react-native-screens 的安装，添加下面两行代码到 android/app/build.gradle 文件的 dependencies 部分中：
implementation ‘androidx.appcompat:appcompat:1.1.0-rc01’
implementation ‘androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02’
复制代码为了完成 react-native-gesture-handler 的安装, 在入口文件的顶部添加下面的代码, 比如 index.js 或 App.js:
import ‘react-native-gesture-handler’;
复制代码现在，我们需要把整个 App用 NavigationContainer包裹：
import React from ‘react’;
import { NavigationContainer } from ‘@react-navigation/native’;

const App = () => {
return (

{/* Rest of your app code */}

);
};

export default App;
复制代码App.js
import React from ‘react’;
import {
View,
Text,
StyleSheet,
SafeAreaView,
StatusBar,
BackHandler,
} from ‘react-native’;
import {NavigationContainer, useFocusEffect} from ‘@react-navigation/native’;
import {createBottomTabNavigator} from ‘@react-navigation/bottom-tabs’;
import {createStackNavigator, HeaderBackButton} from ‘@react-navigation/stack’;
import {IconOutline} from ‘@ant-design/icons-react-native’;
import {Button} from ‘@ant-design/react-native’;
import IconWithBadge from ‘./IconWithBadge’;
import HeaderButtons from ‘./HeaderButtons’;
import getActiveRouteName from ‘./getActiveRouteName’;
import getScreenOptions from ‘./getScreenOptions’;
import {navigationRef} from ‘./NavigationService’;

const HomeScreen = ({navigation, route}) => {
navigation.setOptions({
headerLeft: props => (
<HeaderBackButton
{…props}
onPress={() => {
console.log(‘不能再返回了！’);
}}
/>
),
headerRight: () => (

{/* title、iconName、onPress、IconComponent、iconSize、color */}
<HeaderButtons.Item
title=“添加”
iconName=“plus”
onPress={() => console.log(‘点击了添加按钮’)}
iconSize={24}
color="#ffffff"
/>

),
});

useFocusEffect(
React.useCallback(() => {
// Do something when the screen is focused
return () => {
// Do something when the screen is unfocused
// Useful for cleanup functions
};
}, []),
);
const {author} = route.params || {};
return (
<>

Home Screen
{author}
<Button
type=“warning”
// 使用 setOptions 更新标题
onPress={() => navigation.setOptions({headerTitle: ‘Updated!’})}>
Update the title

<Button
type=“primary”
onPress={() =>
// 跳转到指定页面，并传递两个参数
navigation.navigate(‘DetailsScreen’, {
otherParam: ‘anything you want here’,
})
}>
Go to DetailsScreen

<Button
type=“warning”
onPress={() => navigation.navigate(‘SafeAreaViewScreen’)}>
Go SafeAreaViewScreen

<Button
type=“primary”
onPress={() =>
navigation.navigate(‘CustomAndroidBackButtonBehaviorScreen’)
}>
Go CustomAndroidBackButtonBehavior

</>
);
};

const SettingsScreen = ({navigation, route}) => {
return (
<SafeAreaView
style={{flex: 1, justifyContent: ‘space-between’, alignItems: ‘center’}}>
This is top text.
This is bottom text.

);
};

const SafeAreaViewScreen = () => {
return (
<SafeAreaView
style={{flex: 1, justifyContent: ‘space-between’, alignItems: ‘center’}}>
This is top text.
This is bottom text.

);
};

const CustomAndroidBackButtonBehaviorScreen = ({navigation, route}) => {
useFocusEffect(
React.useCallback(() => {
const onBackPress = () => {
alert(‘物理返回键被拦截了！’);
return true;
};

  BackHandler.addEventListener('hardwareBackPress', onBackPress);

  return () =>
    BackHandler.removeEventListener('hardwareBackPress', onBackPress);
}, []),

);
return (

AndroidBackHandlerScreen

);
};

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

export default App;
复制代码
路由名称的大小写无关紧要 – 你可以使用小写字母home或大写字母Home，这取决于你的喜好。我们更喜欢将路由名称大写。我们更喜欢利用我们的路由名称。

跳转方法有 navigate、 push 、goBack、popToTop

可以用 navigation.setParams 方法更新页面的参数

我们可以通过 options={({ route, navigation }) => ({ headerTitle: route.params.name })} 的方式在标题中使用参数

我们可以用 navigation.setOptions 更新页面配置

Stack.Navigator

initialRouteName : 用来配置 Stack.Navigator 的初始路由
screenOptions: 页面共享配置对象

Stack.Screen

name: 页面名
component: 页面对应组件
options: 页面配置对象
initialParams: 默认参数

HeaderButtons.js
使用 react-native-header-buttons 组件搭配任意 Icon 组件可以自定义自己的 Header Button 组件：
import React from ‘react’;
import {
HeaderButtons as RNHeaderButtons,
HeaderButton as RNHeaderButton,
Item,
} from ‘react-navigation-header-buttons’;
import {IconOutline} from ‘@ant-design/icons-react-native’;

const HeaderButton = props => {
return (
<RNHeaderButton
{…props}
IconComponent={IconOutline}
iconSize={props.iconSize || 23}
color={props.color || ‘#000000’}
/>
);
};

const HeaderButtons = props => {
return <RNHeaderButtons HeaderButtonComponent={HeaderButton} {…props} />;
};

HeaderButtons.Item = Item;

export default HeaderButtons;
复制代码IconWithBadge.js
import React from ‘react’;
import {View} from ‘react-native’;
import {Badge} from ‘@ant-design/react-native’;

const IconWithBadge = ({children, badgeCount, …props}) => {
return (
<View style={{width: 24, height: 24, margin: 5}}>
{children}
<Badge
{…props}
style={{position: ‘absolute’, right: -6, top: -3}}
text={badgeCount}
/>

);
};

export default IconWithBadge;
复制代码getActiveRouteName.js
/**

Gets the current screen from navigation state
@param state
*/
const getActiveRouteName = state => {
const route = state.routes[state.index];

if (route.state) {
// Dive into nested navigators
return getActiveRouteName(route.state);
}

return route.name;
};

export default getActiveRouteName;

复制代码getScreenOptions.js
import {TransitionPresets} from ‘@react-navigation/stack’;

const getScreenOptions = () => {
return {
headerStyle: {
backgroundColor: ‘#ffffff’,
}, // 一个应用于 header 的最外层 View 的样式对象
headerTintColor: ‘#000000’, // 返回按钮和标题都使用这个属性作为它们的颜色
headerTitleStyle: {
fontWeight: ‘bold’,
},
headerBackTitleVisible: false,
headerTitleAlign: ‘center’,
cardStyle: {
flex: 1,
backgroundColor: ‘#f5f5f9’,
},
…TransitionPresets.SlideFromRightIOS,
};
};

export default getScreenOptions;

复制代码NavigationService.js
import React from ‘react’;

export const navigationRef = React.createRef();

const navigate = (name, params) => {
navigationRef.current && navigationRef.current.navigate(name, params);
};

const getNavigation = () => {
return navigationRef.current && navigationRef.current;
};

export default {
navigate,
getNavigation,
};
复制代码页面生命周期与React Navigation
一个包含页面 A 和 B 的 StackNavigator ，当跳转到 A 时，componentDidMount 方法会被调用；当跳转到 B 时，componentDidMount 方法也会被调用，但是 A 依然在堆栈中保持被加载状态，他的 componentWillUnMount 也不会被调用。
当从 B 跳转到 A，B的 componentWillUnmount 方法会被调用，但是 A 的 componentDidMount方法不会被调用，应为此时 A 依然是被加载状态。
React Navigation 生命周期事件
addListener
function Profile({ navigation }) {
React.useEffect(() => {
const unsubscribe = navigation.addListener(‘focus’, () => {
// Screen was focused
// Do something
});

return unsubscribe;

}, [navigation]);

return ;
}
复制代码useFocusEffect
useFocusEffect(
React.useCallback(() => {
// Do something when the screen is focused
return () => {
// Do something when the screen is unfocused
// Useful for cleanup functions
};
}, []),
);
复制代码隐藏 Header/TabBar

headerMode:“none”: hide Header for Stack.Navigator
headerShown:false: hide Header for Stack.Screen
tabBar={() => null}: hide TabBar for BottomTab.Navigator

import {NavigationContainer, useFocusEffect} from ‘@react-navigation/native’;
import {createStackNavigator, TransitionPresets, HeaderBackButton} from ‘@react-navigation/stack’;
import {createBottomTabNavigator} from ‘@react-navigation/bottom-tabs’;

const Stack = createStackNavigator();
const BottomTab = createBottomTabNavigator();

export default App = () => {

<Stack.Navigator headerMode=“none”>
<Stack.Screen
…
options={{ headerShown: false }}
/>
<Stack.Screen …>
{() => (
<BottomTab.Navigator
…
tabBar={() => null}
>
…
</BottomTab.Navigator>
)}
</Stack.Screen>
</Stack.Navigator>

}
复制代码TabBar 的 StatusBar 不同
一般我们会对特殊的那个TabBar进行处理。
const getActiveRouteName = state => {
const route = state.routes[state.index];

if (route.state) {
// Dive into nested navigators
return getActiveRouteName(route.state);
}

return route.name;
};

function GoToButton({ screenName }) {
const navigation = useNavigation();

return (
<Button
title={Go to ${screenName}}
onPress={() => navigation.navigate(screenName)}
/>
);
}
复制代码给页面传递额外的属性
<Stack.Screen
name=“HomeScreen”
options={{headerTitle: ‘首页’}}>
{props => <HomeScreen {…props} extraData={{author: ‘杨俊宁’}} />}
</Stack.Screen>
复制代码获取 Header Height
import { useHeaderHeight } from ‘@react-navigation/stack’

const App = () => {
const HeaderHeight = useHeaderHeight() // 获取Header Height
return(…)
}

export default App

【weixin-sjk6070】

发布了86 篇原创文章 · 获赞 0 · 访问量 7191

私信关注

usb加密狗破解软件

猜你喜欢