React Navigation のユースケース分析

今回は React Navigation のユースケースの分析をお届けします。React Navigation を使用する際の 注意事項 は何ですか? 実際の事例を見てみましょう。

1. ナビゲーション バー

ナビゲーション バーの使用中に次の問題が発生しました

1. ナビゲーション バーの下部に黒い線があります

本来の目的はページを作成することです。ここで、バーの色はページの色と一致しています。上部に他の 2 つのボタンがある場合のみ。バーの下部に黒い線を見つけました。その結果、バーは目的のページ効果にうまく適合できません。ヘッダーにコードを設定すると削除できます

static navigationOptions = {
 ...
 headerStyle: {
    ...
    borderBottomWidth: 0,
  },
 }

2. Androidバーの下部に影があり、カスタムバーの背景画像を埋めることができません

反応ナビゲーションバーの高さはAndroid のデフォルト。視覚効果としては、下部に影ができることです。もう 1 つの厄介な影響は、背景画像を含むカスタム バーが使用された場合です。背景画像には不完全なカバレッジの効果があることがわかります。側面には必ず隙間ができます。この問題はiOSでは発生しません。この問題は、elevation 属性をゼロに設定することで解決できます

 static navigationOptions = {
 ...
 headerStyle: {
    ...
    elevation: 0,
  },
 }

3. Android でバーのタイトルが中央揃えになる問題

Android では、バーのタイトルが左中央に配置されます。 iOS はデフォルトで中央に配置されます。左側にボタンがない場合は、次の書き方で

static navigationOptions = {
 ...
 headerTitleStyle: {
    //此属性是标题的Style属性。可以接受<Text>标签的style
    ...
    alignSelf: "center",
  },
 }

を中央揃えにすることができます。このように書けば十分です。ただし、左側にリターンキーまたはその他のカスタマイズされたキーがある場合。 Android ではタイトルがオフセットされます。解決策は、右側に空のボタンを追加することです

static navigationOptions = {
 ...
 headerRight: <View />
 }

4. 背景画像付きのナビゲーションバー

は、Yuanshengとは異なります。 React ナビゲーション バーには背景画像属性がありません。つまり、背景画像付きのナビゲーション バーを使用したい場合は、カスタム ビューを使用する必要があります。

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. StackNavigator が DrawerNavigator とネストされている場合のジェスチャの競合の問題

DrawerNavigator が StackNavigator にネストされている場合。 StackNav の 2 番目のインターフェイスに入った後、戻るジェスチャは DrawerNav メニューを開くことと競合します。

static navigationOptions = {
 ...
 //禁止打开菜单
 drawerLockMode: "locked-closed", 
 //允许使用返回手势
 gesturesEnabled: true,
 }

この設定は必要に応じて変更できます

5.ナビゲーションバーの高さの不一致の問題

カスタマイズされたバーを使用する場合。 Android と iOS は非常に矛盾しています。 Android は、携帯電話の上部からナビゲーションの高さを計算します。デフォルトでは、iOS はステータス バーの高さを下方にオフセットします。均一な効果を達成するため。 Android バーのpaddingTop プロパティをステータス バーの高さ

import {StatusBar, Platform} from "react-native";
navigationOptions = {
 ...
 headerStyle: {
   ...
   paddingTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight,
  },
 }

に設定する必要があります。6. ナビゲーション バーのカスタム ボタンを使用します

ボタンまたは View をカスタマイズするには headerRight または headerLeft を使用します

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

onPress メソッドを使用する必要があります。クラス内の this.props、this.state、またはその他のメソッドに移動するときに問題が発生します。各ページのクラスでは、static NavigationOptions={...} を使用していくつかのナビゲーション構成を構成します。ただし、static によって変更されたプロパティはクラスの static プロパティに属しているためです。 this のプロパティ メソッドを呼び出すことはできません。したがって、 this.props.navigation.setParams({key:value ...}) メソッドを使用して、ヘッダー ボタンのクリック イベントを設定する必要があります。

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue を使用して 2048 ミニゲームを実装する方法

Vue で vee-validate を使用する方法

以上がReact Navigation のユースケース分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。