React Navigation use case analysis
This time I will bring you an analysis of React Navigation use cases. What are the precautions when using React Navigation? The following is a practical case, let’s take a look.
1. Navigation Bar
I encounter the following problems when using navigation bar
1.navigation bar There is a black line at the bottom
It is intended to make a page where the color of the bar is consistent with the color of the page. Only if there are two other buttons at the top. Found a black line at the bottom of the bar. As a result, the bar cannot match the desired page effect well. After setting the code in the header, it can be removed
static navigationOptions = {
...
headerStyle: {
...
borderBottomWidth: 0,
},
}2. There is a shadow at the bottom of the android Bar, and the custom Bar background image cannot be filled
react navigation bar In Android there is a height by default. The visual effect is that there will be a shadow at the bottom. And another troublesome effect is when a custom Bar with a background image is used. You will find that the background image has the effect of incomplete coverage. There is always some gap on the sides. This problem does not occur in iOS. This problem can be solved by setting the elevation attribute to zero
static navigationOptions = {
...
headerStyle: {
...
elevation: 0,
},
}3. The problem of centering the Bar title in android
In Android, the title of the bar is left-centered. iOS is centered by default. You can center it by writing
static navigationOptions = {
...
headerTitleStyle: {
//此属性是标题的Style属性。可以接受<Text>标签的style
...
alignSelf: "center",
},
}when there are no buttons on the left side. It is enough to write like this. But if there is a return key or other customized keys on the left side. The title will be offset in Android. The solution is to add an empty button on the right
static navigationOptions = {
...
headerRight: <View />
}4. The Navgation Bar with background image
is different from the original one. There is no background image attribute in react navigation bar. In other words, when we want to use the navigation bar with a background image, we must use a custom view.
import {Header} from "react-navigation";
//header 需导入
const ImageHeader = props => (
<View>
<Image
style={{position: "absolute", zIndex: -1, width: "100%", height: "100%", resizeMode: "cover"}}
source={require(...)}
/>
<Header {...props} style={{backgroundColor: "transparent"}} />
</View>
);
static navigationOptions = {
...
headerStyle: {
//背景颜色必须为透明，不然无法透出底部图片
backgroundColor: "transparent",
//安卓中不添加此属性会导致背景图无法铺满
elevation: 0,
},
header: props => {
return <ImageHeader {...props} />;
},
}5. Gesture conflict problem when StackNavigator is nested with DrawerNavigator
When DrawerNavigator is nested in StackNavigator. After entering the secondary interface of StackNav, the return gesture conflicts with opening the DrawerNav menu.
static navigationOptions = {
...
//禁止打开菜单
drawerLockMode: "locked-closed",
//允许使用返回手势
gesturesEnabled: true,
}This setting can be modified according to your needs
5.Navgation Bar height inconsistency problem
When using a custom Bar. Android and iOS are highly inconsistent. Android calculates the Nav height from the top of the phone. By default, iOS will offset the height of the status bar downwards. To achieve uniform effect. You need to set the paddingTop property of the Android Bar to the status bar height
import {StatusBar, Platform} from "react-native";
navigationOptions = {
...
headerStyle: {
...
paddingTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight,
},
}6. Use custom buttons on the navigation Bar
Use headerRight Or headerLeft can customize the button or View
static navigationOptions = {
...
headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={...}>
<Text style={styles.NavSureButton}>btn</Text>
</TouchableOpacity>)
}But if the onPress method uses this.props, this.state or other methods in the class, there will be problems
In each In the page class, we use static navigationOptions={...} to configure some navigation configurations. But because the properties modified by static belong to the static properties of the class. The property method of this cannot be called. So we need to use this.props.navigation.setParams({key:value ...}) method to set the click event of the header button.
class Demo extends React,Component{
componentWillMount() {
//绑定方法
this.props.navigation.setParams({rightOnPress: this.rightBtnOnPress});
}
//点击方法
rightBtnOnPress = ()=>{
...
}
static navigationOptions = ({navigation}) => {
const params = navigation.state.params || {};
let navigationOptions = {
...
headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={params.rightOnPress}>
<Text style={styles.NavSureButton}>btn</Text>
</TouchableOpacity>)
}
return navigationOptions;
};
...
}I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to use vue to implement the 2048 mini game
How to use vee-validate in Vue
The above is the detailed content of React Navigation use case analysis. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Detailed explanation of Oracle error 3114: How to solve it quickly
Mar 08, 2024 pm 02:42 PM
Detailed explanation of Oracle error 3114: How to solve it quickly, specific code examples are needed. During the development and management of Oracle database, we often encounter various errors, among which error 3114 is a relatively common problem. Error 3114 usually indicates a problem with the database connection, which may be caused by network failure, database service stop, or incorrect connection string settings. This article will explain in detail the cause of error 3114 and how to quickly solve this problem, and attach the specific code
Parsing Wormhole NTT: an open framework for any Token
Mar 05, 2024 pm 12:46 PM
Wormhole is a leader in blockchain interoperability, focused on creating resilient, future-proof decentralized systems that prioritize ownership, control, and permissionless innovation. The foundation of this vision is a commitment to technical expertise, ethical principles, and community alignment to redefine the interoperability landscape with simplicity, clarity, and a broad suite of multi-chain solutions. With the rise of zero-knowledge proofs, scaling solutions, and feature-rich token standards, blockchains are becoming more powerful and interoperability is becoming increasingly important. In this innovative application environment, novel governance systems and practical capabilities bring unprecedented opportunities to assets across the network. Protocol builders are now grappling with how to operate in this emerging multi-chain
PHP, Vue and React: How to choose the most suitable front-end framework?
Mar 15, 2024 pm 05:48 PM
PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.
Analysis of the meaning and usage of midpoint in PHP
Mar 27, 2024 pm 08:57 PM
[Analysis of the meaning and usage of midpoint in PHP] In PHP, midpoint (.) is a commonly used operator used to connect two strings or properties or methods of objects. In this article, we’ll take a deep dive into the meaning and usage of midpoints in PHP, illustrating them with concrete code examples. 1. Connect string midpoint operator. The most common usage in PHP is to connect two strings. By placing . between two strings, you can splice them together to form a new string. $string1=&qu
Integration of Java framework and front-end React framework
Jun 01, 2024 pm 03:16 PM
Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.
Analysis of new features of Win11: How to skip logging in to Microsoft account
Mar 27, 2024 pm 05:24 PM
Analysis of new features of Win11: How to skip logging in to a Microsoft account. With the release of Windows 11, many users have found that it brings more convenience and new features. However, some users may not like having their system tied to a Microsoft account and wish to skip this step. This article will introduce some methods to help users skip logging in to a Microsoft account in Windows 11 and achieve a more private and autonomous experience. First, let’s understand why some users are reluctant to log in to their Microsoft account. On the one hand, some users worry that they
Apache2 cannot correctly parse PHP files
Mar 08, 2024 am 11:09 AM
Due to space limitations, the following is a brief article: Apache2 is a commonly used web server software, and PHP is a widely used server-side scripting language. In the process of building a website, sometimes you encounter the problem that Apache2 cannot correctly parse the PHP file, causing the PHP code to fail to execute. This problem is usually caused by Apache2 not configuring the PHP module correctly, or the PHP module being incompatible with the version of Apache2. There are generally two ways to solve this problem, one is
Comparison of Java libraries for XML parsing: Finding the best solution
Mar 09, 2024 am 09:10 AM
Introduction XML (Extensible Markup Language) is a popular format for storing and transmitting data. Parsing XML in Java is a necessary task for many applications, from data exchange to document processing. To parse XML efficiently, developers can use various Java libraries. This article will compare some of the most popular XML parsing libraries, focusing on their features, functionality, and performance to help developers make an informed choice. DOM (Document Object Model) parsing library JavaXMLDOMAPI: a standard DOM implementation provided by Oracle. It provides an object model that allows developers to access and manipulate XML documents. DocumentBuilderFactoryfactory=D
