React Navigationを使用する際の注意点は何ですか?-jsチュートリアル-php.cn

React Navigationを使用する際の注意点は何ですか?

php中世界最好的语言

リリース： 2018-05-22 14:59:44

オリジナル

1557 人が閲覧しました

今回はReact Navigationを使用する際の注意点についてお届けします、React Navigationを使用する際の注意点は何ですか、以下は実践的なケースです、見てみましょう。

React Native の開発において、React ナビゲーションフレームワークを使用するときに多くの問題に遭遇しました。主に Android と iOS 間の相対的な非互換性が原因で、ここに記録します

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 メソッドの場合これを使用する必要がある場合、クラス内の 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 コンポーネントを npm に公開する手順の分析

Vue マルチレベルコンポーネントのprovide/injectの使用方法の詳細な説明

以上がReact Navigationを使用する際の注意点は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。