What are the precautions for using React Navigation?-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

What are the precautions for using React Navigation?

php中世界最好的语言

May 22, 2018 pm 02:59 PM

navigation react Precautions

This time I will bring you the precautions for using React NavigationWhat are the precautions for using React Navigation? The following is a practical case, let's take a look.

In the development of React Native, many problems were encountered when using the react navigation framework. Mainly due to the relative incompatibility between Android and iOS, hereby record

1. Navigation Bar

When using navigation bar, you encounter the following problems Question

1. There is a black line at the bottom of the navigation bar

The original intention is 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,
  },
 }

Copy after login

2. There is a shadow at the bottom of the Bar of android, and the custom Bar background image cannot fill the

react navigation bar will have a height by default in Android. 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,
  },
 }

Copy after login

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",
  },
 }

Copy after login

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 />
 }

Copy after login

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} />;
  },
 }

Copy after login

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,
 }

Copy after login

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,
  },
 }

Copy after login

6. Use custom buttons on the navigation Bar

Use headerRight or headerLeft to customize the button or View

static navigationOptions = {
 ...
 headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={...}>
        <Text style={styles.NavSureButton}>btn</Text>
      </TouchableOpacity>)
 }

Copy after login

But if the onPress method uses this.props, this.state or other methods in the class, problems will arise

In the class of each page, we use static navigationOptions={...} to configure some configurations of navigation. 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;
  };
  ...
}

Copy after login

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!

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

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

Atomfall guide: item locations, quest guides, and tips

1 months ago By DDD

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

Where is the login entrance for gmail email?

7704

Java Tutorial

1640

CakePHP Tutorial

1393

Laravel Tutorial

1288

PHP Tutorial

1231

Related knowledge

Introduction to matters needing attention during the Mingchao test Mar 13, 2024 pm 08:13 PM

During the Mingchao test, please avoid system upgrades, factory resets, and parts replacement to prevent information loss and abnormal game login. Special reminder: There is no appeal channel during the testing period, so please handle it with caution. Introduction to matters needing attention during the Mingchao test: Do not upgrade the system, restore factory settings, replace equipment components, etc. Notes: 1. Please upgrade the system carefully during the test period to avoid information loss. 2. If the system is updated, it may cause the problem of being unable to log in to the game. 3. At this stage, the appeal channel has not yet been opened. Players are advised to choose whether to upgrade at their own discretion. 4. At the same time, one game account can only be used with one Android device and one PC. 5. It is recommended that you wait until the test is completed before upgrading the mobile phone system or restoring factory settings or replacing the device.

How to start a live broadcast on Douyin for the first time? What should you pay attention to when broadcasting live for the first time? Mar 22, 2024 pm 04:10 PM

With the rise of short video platforms, Douyin has become an indispensable part of many people's daily lives. Live broadcasting on Douyin and interacting with fans are the dreams of many users. So, how do you start a live broadcast on Douyin for the first time? 1. How to start a live broadcast on Douyin for the first time? 1. Preparation To start live broadcast, you first need to ensure that your Douyin account has completed real-name authentication. You can find the real-name authentication tutorial in "Me" -> "Settings" -> "Account and Security" in the Douyin APP. After completing the real-name authentication, you can meet the live broadcast conditions and start live broadcast on the Douyin platform. 2. Apply for live broadcast permission. After meeting the live broadcast conditions, you need to apply for live broadcast permission. Open Douyin APP, click "Me"->"Creator Center"->"Direct

Steps and precautions for installing pip without network Jan 18, 2024 am 10:02 AM

Methods and precautions for installing pip in an offline environment. Installing pip becomes a challenge in an offline environment where the network is not smooth. In this article, we will introduce several methods of installing pip in an offline environment and provide specific code examples. Method 1: Use the offline installation package. In an environment that can connect to the Internet, use the following command to download the pip installation package from the official source: pipdownloadpip This command will automatically download pip and its dependent packages from the official source and save it in the current directory. Move the downloaded compressed package to a remote location

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.

Steps and precautions for using localstorage to store data Jan 11, 2024 pm 04:51 PM

Steps and precautions for using localStorage to store data This article mainly introduces how to use localStorage to store data and provides relevant code examples. LocalStorage is a way of storing data in the browser that keeps the data local to the user's computer without going through a server. The following are the steps and things to pay attention to when using localStorage to store data. Step 1: Check whether the browser supports LocalStorage

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.

Steps and points for correctly installing and using pip in a Linux environment Jan 17, 2024 am 09:31 AM

The installation steps and precautions of pip in the Linux environment Title: The installation steps and precautions of pip in the Linux environment When developing Python, we often need to use third-party libraries to increase the functionality of the program. As a standard package management tool for Python, pip can easily install, upgrade and manage these third-party libraries. This article will introduce the steps to install pip in a Linux environment, and provide some precautions and specific code examples for reference. 1. Install pip to check the Python version

Frequently Asked Questions and Notes: Using MyBatis for Batch Query Feb 19, 2024 pm 12:30 PM

Notes and FAQs on MyBatis batch query statements Introduction MyBatis is an excellent persistence layer framework that supports flexible and efficient database operations. Among them, batch query is a common requirement. By querying multiple pieces of data at one time, the overhead of database connection and SQL execution can be reduced, and the performance of the system can be improved. This article will introduce some precautions and common problems with MyBatis batch query statements, and provide specific code examples. Hope this can provide some help to developers. Things to note when using M

See all articles