反応ネイティブルータフラックスを使用してナビゲーションバーの右ボタンを作成する方法は？

Question

私はリアクションネイティブルータフラックスを使用してナビゲーションバーの右ボタンを作っています。

私のコードは

import React from 'React'; 
import { TouchableHighlight } from 'react-native'; 
import { Scene, Router, Actions } from 'react-native-router-flux'; 
... 
const filterIcon =() => (
<TouchableHighlight onPress={()=>} style={{...}}> 
<Icon name="filter" size={30}/> 
</TouchableHighlight> 
); 
const MainRounter=()=>(
<Router> 
<Scene 
key="main" 
component={mainPage} 
initial={true} 
renderRightButton={()=>filterIcon} 
/> 
</Router> 
); 

あるしかし、私は、ナビゲーションバーの右ボタンを表示することはできません。 どうすれば作れますか？

Answer 1

あなたはonRight、rightTitleまたはrightButtonImageは、ナビゲーションバーに右ボタンを追加するために使用できるでこの問題を見てみ作成する必要があります。

const MainRounter = return (
    <Router> 
     <Scene 
      key="main" 
      component={mainPage} 
      initial={true} 
      onRight={()=> whatever you want to do } 
      rightButtonImage={require('path/to/your/icon')} 
     /> 
    </Router> 
); 

それは:)

Answer 2

は、カスタムナビゲーションバーはgithubのcustom navBar

Answer 3

UPDATE働いていた場合、私に教えてください - 以下に記載する方法は再び、作業を停止している最後のリリースでは2017年10月18日

を。だから、これは私の最後の解決策は次のとおりです。

class MyAwesomeClass extends React.Component { 


    componentWillMount() { 
     Actions.refresh({ right: this._renderRightButton }); 
    } 

    _renderRightButton =() => { 
     return(
      <TouchableOpacity onPress={() => this._handleIconTouch() } > 
       <Icon name="check" size={26} color='grey' /> 
      </TouchableOpacity> 
     ); 
    }; 

    _handleIconTouch =() => { 
     console.log('Touched!'); 
    } 

} 

UPDATE - RNRF4ナビゲーションソリューションとして今ReactNavigationを使用しているので2017年8月7日

、上記の溶液は動作を停止しました。 ReactNavigation APIを直接使用するためには、再び動作させる必要があります。これは私の解決策です：

ナビゲーションオプション内の一般的なナビゲーション情報は、クラスレベルでアクセスされます。コンテキストは静的なので、Componentメソッドとそのパラメータにはアクセスできません。それを動作させるには少しの回避策が必要です。

まず、あなたのタッチを処理する関数を定義する必要があります。この場合handleIconTouchです。ここでは、ボタンが押されたときにボタンが実行するアクションを定義する必要があります。この機能は静的ではないので、ここから小道具や状態にアクセスして、より多くの機能とオプションを提供することができます。

次に、あなたのcomponentWillMountで（）方法は、SETPARAMS（）がnavigationOptionsの静的コンテキストで利用できるようにすると、ナビゲーションのparamsにメソッドを追加します。このメソッドは静的でもないので、必要なパラメータをボタンに渡すことができます。

最後に、パラメータを使用して、最も適したコンポーネントを使用してnavigationOptions/headerRightキー内にボタンを定義します。で追加componentWillMountで

renderRightButton =() => { 
    return(
     <TouchableOpacity onPress={() => null } > 
      <Icon name="check" size={26} color='grey' /> 
     </TouchableOpacity> 
    ); 
}; 

を（）メソッド：

1. は、例えば、ご希望のロジックとイメージを持つメソッドを作成します。

   ORIGINAL 私はあなたにこのアプローチをお勧めします初め：

   Actions.refresh({ renderRightButton: this.renderRightButton });

2. 準備完了！

疑問がある場合は教えてください。

Answer 4

RNRF4の場合。ありがとうございますJacse。

import React from 'react'; 
 
import { View, Button, Alert } from 'react-native'; 
 

 
class MyScreen extends React.Component { 
 
    static navigationOptions = ({ navigation }) => { 
 
     const { params = {} } = navigation.state; 
 
     return { 
 
     headerRight: <Button title="Save" onPress={() => params.handleSave()} /> 
 
     }; 
 
    }; 
 

 
    _saveDetails() { 
 
     Alert.alert('clicked save'); 
 
    } 
 

 
    componentDidMount() { 
 
     this.props.navigation.setParams({ handleSave: this._saveDetails }); 
 
    } 
 

 
    render() { 
 
     return (
 
     <View /> 
 
    ); 
 
    } 
 
} 
 
export default MyScreen;

Answer 5

RNRF4私はこのコードを試してみました細かい作業

<Scene 
     key="SignUp" 
     component={SignUp} 
     title="SignUp" 
     onRight={()=>{}} 
     rightTitle={' Save'} /> 

//新規アカウントコンポーネント

export default class SignUp extends Component { 
    componentWillMount() { 
     this.props.navigation.setParams({ 
      'onRight': this.handleIconTouch 
     }) 
    } 

    handleIconTouch() { 
     debugger; 
    } 

    render() { 
     return(); 
    } 
}