Question

import React from 'react'
import {
  StackNavigator
} from 'react-navigation'

import Home from './Home'
import Detail from './Detail'
import MyIcon from './MyIcon'

export default StackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Foo',
      headerRight: (<MyIcon dispatch={}/>), //<- Here
    }
  },
  Detail: {
    screen: Detail,
    navigationOptions: {},
  },
})

我想在React Navigation Option设置中将dispatch函数传递给HeaderComponent，如headerRight。我怎么能这样做？

Answer 1

您需要call dispatch headerRight component功能，并mounted this.props.navigation.setParams使用import React from 'react' import { StackNavigator } from 'react-navigation' import Home from './Home' import Detail from './Detail' import MyIcon from './MyIcon' export default StackNavigator({ Home: { screen: Home, navigationOptions: ({ navigation }) => { title: 'Foo', headerRight: (<MyIcon onPress={ () => navigation.state.params.dispatch() } />) // calling dispatch when headerRight icon is press } }, Detail: { screen: Detail, navigationOptions: {}, }, })

进行设置

dispatch

在您的组件中设置... //setting dispatch function to headerRight in your component componentDidMount() { this.props.navigation.setParams({ dispatch: this.dispatch.bind(this) }); } dispatch() { // your code }功能

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
 <!--<script src="../js/jquery.js"></script>-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
  <title>Document</title>
 </head>
 <body>
<!-- give the jquery manual to everybody !!! -->
<!-- https://github.com/Yahasana/jqdoc-parser  -->

<style type="text/css">
.even{
	background-color:red;
}
.normal{
	background-color:white;
}
</style>



  <button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="hdpe">HDPE Pipes</button>
<button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>


<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>

<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>

<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>

<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>





<script type="text/javascript">
<!--
$(document).ready(function(){
	




$('.filter-button').click(function(){
var value = $(this).attr('data-filter');

if(value == 'all')
{
$('.filter').show('1000');
$(".filter").removeClass("even").addClass('normal');
}
else
{
/*
$('.filter').filter('.'+value).removeClass('even').removeClass('odd').removeClass('visible');


$('.filter').not('.'+value).hide('3000');
$('.filter').not('.filter[filter-item="'+value+'"]').removeClass('visible');

$('.filter').filter('.'+value).show('3000');
$('.filter').filter('.'+value).addClass('visible');

$( ".visible" ).filter( ":even" ).css( "background-color", "red" );*/
//$( ".visible" ).filter( ":even" ).addClass( "even" );


            $(".filter").not('.'+value).hide('3000');
            
			
			
			$('.filter').filter('.'+value).show('3000');

			var iii=1;
$('.filter').filter('.'+value).each(function(index) {
    //alert(index + ': ' + $(this).text());
console.log(index + ': ' + $(this).text());
if((iii/2)==parseInt(iii/2)){
	console.log('yep');
	//$(this).css( "background-color", "red" );//works but is more good ideea to add a class like you tryed
	$(this).addClass("even");
};
iii++;
});



}
});

if ($('.filter-button').removeClass('active')) {
$(this).removeClass('active');
}
$(this).addClass('active');










var index=1;
	$('input').each(function(index) {
		$(this).before(index);
		$('textarea').val($('textarea').val()+'\n'+$(this).val());
		index++;
	});

});
//-->
</script>
 </body>
</html>

我希望这有帮助！

如何将调度功能传递到Header组件？

1 个答案: