What are the precautions for using React Navigation?

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

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

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 to 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, 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;
  };
  ...
}

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:

Analysis of steps for publishing vue components to npm

Detailed explanation of the use of Vue multi-level components provide/inject

The above is the detailed content of What are the precautions for using React Navigation?. For more information, please follow other related articles on the PHP Chinese website!