What are the precautions in actual combat of React Navigation?
This time I will bring you what precautions are in the actual combat of React Navigation. What are the precautions in the actual combat of 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:
JS retains one digit and removes non-digits
JS retains two decimal places for input numbers Verification code
The above is the detailed content of What are the precautions in actual combat of React Navigation?. 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
Guide to React front-end and back-end separation: How to achieve decoupling and independent deployment of front-end and back-end
Sep 28, 2023 am 10:48 AM
React front-end and back-end separation guide: How to achieve front-end and back-end decoupling and independent deployment, specific code examples are required In today's web development environment, front-end and back-end separation has become a trend. By separating front-end and back-end code, development work can be made more flexible, efficient, and facilitate team collaboration. This article will introduce how to use React to achieve front-end and back-end separation, thereby achieving the goals of decoupling and independent deployment. First, we need to understand what front-end and back-end separation is. In the traditional web development model, the front-end and back-end are coupled
How to build simple and easy-to-use web applications with React and Flask
Sep 27, 2023 am 11:09 AM
How to use React and Flask to build simple and easy-to-use web applications Introduction: With the development of the Internet, the needs of web applications are becoming more and more diverse and complex. In order to meet user requirements for ease of use and performance, it is becoming increasingly important to use modern technology stacks to build network applications. React and Flask are two very popular frameworks for front-end and back-end development, and they work well together to build simple and easy-to-use web applications. This article will detail how to leverage React and Flask
How to build a reliable messaging app with React and RabbitMQ
Sep 28, 2023 pm 08:24 PM
How to build a reliable messaging application with React and RabbitMQ Introduction: Modern applications need to support reliable messaging to achieve features such as real-time updates and data synchronization. React is a popular JavaScript library for building user interfaces, while RabbitMQ is a reliable messaging middleware. This article will introduce how to combine React and RabbitMQ to build a reliable messaging application, and provide specific code examples. RabbitMQ overview:
React Router User Guide: How to implement front-end routing control
Sep 29, 2023 pm 05:45 PM
ReactRouter User Guide: How to Implement Front-End Routing Control With the popularity of single-page applications, front-end routing has become an important part that cannot be ignored. As the most popular routing library in the React ecosystem, ReactRouter provides rich functions and easy-to-use APIs, making the implementation of front-end routing very simple and flexible. This article will introduce how to use ReactRouter and provide some specific code examples. To install ReactRouter first, we need
How to build real-time data processing applications using React and Apache Kafka
Sep 27, 2023 pm 02:25 PM
How to use React and Apache Kafka to build real-time data processing applications Introduction: With the rise of big data and real-time data processing, building real-time data processing applications has become the pursuit of many developers. The combination of React, a popular front-end framework, and Apache Kafka, a high-performance distributed messaging system, can help us build real-time data processing applications. This article will introduce how to use React and Apache Kafka to build real-time data processing applications, and
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.
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.
Which games are suitable for playing with i34150 and 1G independent graphics (which games is suitable for i34150)
Jan 05, 2024 pm 08:24 PM
What games can be played with i34150 with 1G independent graphics? Can it play small games such as LoL? GTX750 and GTX750TI are very suitable graphics card choices. If you just play some small games or not play games, it is recommended to use the i34150 integrated graphics card. Generally speaking, the price difference between graphics cards and processors is not very big, so it is important to choose a reasonable combination. If you need 2G of video memory, it is recommended to choose GTX750TI; if you only need 1G of video memory, just choose GTX750. GTX750TI can be seen as an enhanced version of GTX750, with overclocking capabilities. Which graphics card can be paired with i34150 depends on your needs. If you plan to play stand-alone games, it is recommended that you consider changing the graphics card. you can choose
