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!