我有以下代码，其中HomeTab包含NavigatorIOS。我正在传递HomeScreen作为导航器的组件。
我在包含HomeTab的父组件上发生了一些事件，并希望将它们传递给HomeScreen。我能够到达HomeTab。如何为组件设置道具或状态，最好是，我希望能够在其上调用一个函数。任何线索？
class HomeTab extends React.Component {
constructor() {
super()
this.state = {}
}
render() {
return (
<NavigatorIOS style={styles.container}
initialRoute={{
title: 'Home',
component: HomeScreen,
passProps: {}
}}
/>
)
}
}
答案 0 :(得分：0)
你可以简单地将它们传递给那里的passProps对象。
我想你可能会错过HomeScreen组件中的另一块。
var HomeScreen = React.createClass({
propTypes: {
text: React.PropTypes.string.isRequired,
},
然后在你的根视图中你会做
class HomeTab extends React.Component {
constructor() {
super()
this.state = {}
}
render() {
return (
<NavigatorIOS style={styles.container}
initialRoute={{
title: 'Home',
component: HomeScreen,
passProps: {text: 'Woot!'}
}}
/>
)
}
}
N.B。如果您提供isRequired，如果您在显示/推送HomeScreen时没有提供代码，那么您的代码将会停止运行。
答案 1 :(得分：0)
是的，导航器模型打破了React-y数据流（正如我在本回答中所概述的那样：What is the right way to save data from a list view?）
恕我直言，实现您正在尝试做的最佳方式是让此地理定位服务提供您的<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://www.lcudev.com/_css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/open_sans.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/raleway.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/scriptina.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/glyphicons.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/glyphicons_filetypes.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/glyphicons_social.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/master.css">
<link rel="stylesheet" href="http://www.lcudev.com/_css/forms.css">
<script language="javascript" src="http://www.lcudev.com/_javascript/modernizr.custom.92742.js"></script>
<script language="javascript" src="http://www.lcudev.com/_javascript/jquery-2.1.4.min.js"></script>
<script language="javascript" src="http://www.lcudev.com/_javascript/bootstrap.min.js"></script>
<script language="javascript" src="http://www.lcudev.com/_javascript/master.js"></script>
<script language="javascript" src="http://www.lcudev.com/_javascript/forms.js"></script>
<script language="javascript">
$('document').ready(function() {
initializeEventHandlers();
});
</script>
<noscript>
<meta http-equiv="refresh" content="0;URL=/miscellaneous/no_javascript.php">
</noscript>
</head>
<body>
<div id="CONTAINER" class="container">
<header class="row">
<h1>Life Christian University</h1>
<a href="#">
<img src="http://www.lcudev.com/_images/logos/lcu_logo_logotype_lg_20th_anniv.jpg" class="img-responsive">
</a>
</header>
<div class="row">
<!-- main menu code goes here -->
</div>
<ol class="breadcrumb">
<!-- breadcrumbs <li> items goew here -->
</ol>
<div id="SYSTEM_MSG" class="alert alert-info bold col-md-12">Alert Message</div>
<section class="row">
<hgroup>
<h1>Degrees Maintenance</h1>
</hgroup>
<div class="row" style="margin-bottom: 2em;">
<div class="col-md-4 col-md-offset-8">
<a id="ADD_BUTTON" type="button" class="btn btn-primary btn-sm pull-right" href="#"><span class=\"glyphicons glyphicons-plus\"></span> Add a New Degree Code</a>
</div>
</div>
<article class="row">
<div class="col-md-6 col-md-offset-3">
<div class="table-responsive">
<table class="table table-bordered table-condensed table-striped" summary="A list of classes for this campus.">
<colgroup>
<col id="ID">
<col id="LEVEL">
<col id="NAME">
<col id="ACTIONS">
</colgroup>
<thead>
<tr>
<th scope="col" class="text-right">ID</th>
<th scope="col" class="text-center">Level</th>
<th scope="col" class="text-left">Name</th>
<th scope="col" class="text-left">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="text-center" colspan="4">There are 15 degreess defined</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="text-right">A</td>
<td class="text-center">1</td>
<td class="text-left">Associate in</td>
<td class="text-left"><a class="edit" data-id="A" data-level="1" data-name="Associate in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="A" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">AA</td>
<td class="text-center">1</td>
<td class="text-left">Associate of Arts in</td>
<td class="text-left"><a class="edit" data-id="AA" data-level="1" data-name="Associate of Arts in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="AA" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">AD</td>
<td class="text-center">1</td>
<td class="text-left">Advanced Diploma in</td>
<td class="text-left"><a class="edit" data-id="AD" data-level="1" data-name="Advanced Diploma in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="AD" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">B</td>
<td class="text-center">1</td>
<td class="text-left">Bachelor of</td>
<td class="text-left"><a class="edit" data-id="B" data-level="1" data-name="Bachelor of" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="B" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">BA</td>
<td class="text-center">1</td>
<td class="text-left">Bachelor of Arts in</td>
<td class="text-left"><a class="edit" data-id="BA" data-level="1" data-name="Bachelor of Arts in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="BA" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">BS</td>
<td class="text-center">1</td>
<td class="text-left">Bachelor of Science in</td>
<td class="text-left"><a class="edit" data-id="BS" data-level="1" data-name="Bachelor of Science in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="BS" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">CMP</td>
<td class="text-center">1</td>
<td class="text-left">Bachelor of Church Planting & Missions</td>
<td class="text-left"><a class="edit" data-id="CMP" data-level="1" data-name="Bachelor of Church Planting & Missions" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a> <a class="kill" data-id="CMP"
href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a>
</td>
</tr>
<tr>
<td class="text-right">D</td>
<td class="text-center">1</td>
<td class="text-left">Diploma in</td>
<td class="text-left"><a class="edit" data-id="D" data-level="1" data-name="Diploma in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="D" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">DLaw</td>
<td class="text-center">7</td>
<td class="text-left">Doctor of Laws in</td>
<td class="text-left"><a class="edit" data-id="DLaw" data-level="7" data-name="Doctor of Laws in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="DLaw" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">DMin</td>
<td class="text-center">6</td>
<td class="text-left">Doctor of Ministry in</td>
<td class="text-left"><a class="edit" data-id="DMin" data-level="6" data-name="Doctor of Ministry in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a> <a class="kill" data-id="DMin" href="#"
title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a>
</td>
</tr>
<tr>
<td class="text-right">DMis</td>
<td class="text-center">7</td>
<td class="text-left">Doctor of Missiology in</td>
<td class="text-left"><a class="edit" data-id="DMis" data-level="7" data-name="Doctor of Missiology in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a> <a class="kill" data-id="DMis" href="#"
title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a>
</td>
</tr>
<tr>
<td class="text-right">Doc</td>
<td class="text-center">7</td>
<td class="text-left">Doctor of</td>
<td class="text-left"><a class="edit" data-id="Doc" data-level="7" data-name="Doctor of" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="Doc" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">EdD</td>
<td class="text-center">7</td>
<td class="text-left">Doctor of Education in</td>
<td class="text-left"><a class="edit" data-id="EdD" data-level="7" data-name="Doctor of Education in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a> <a class="kill" data-id="EdD" href="#"
title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a>
</td>
</tr>
<tr>
<td class="text-right">M</td>
<td class="text-center">5</td>
<td class="text-left">Master of</td>
<td class="text-left"><a class="edit" data-id="M" data-level="5" data-name="Master of" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="M" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
<tr>
<td class="text-right">MA</td>
<td class="text-center">5</td>
<td class="text-left">Master of Arts in</td>
<td class="text-left"><a class="edit" data-id="MA" data-level="5" data-name="Master of Arts in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>
<a class="kill" data-id="MA" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</article>
<div class="modal fade" id="DEGREE_ENTRY" tabindex="-1" role="dialog" aria-labelledby="classEntryModalDialog" aria-hidden="TRUE">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New Degree Entry</h4>
</div>
<div class="modal-body">
<form id="DEGREE_FORM" name="DEGREE_FORM" role="form" method="post" action="http://admin.lcudev.com/config/degrees/index.php">
<input name="action" id="action" type="hidden" value="">
<div class="row">
<div class="col-md-4 col-md-offset-1">
<div id="id_group" class="form-group">
<label for="id" class="control-label">Degree ID*</label>
<div class="input-group">
<input name="id" id="id" type="text" class="form-control" tabindex="10" required autofocus pattern="[a-zA-Z]+" title="Please enter a new degree ID code here" placeholder="degreeID" value="">
<span class="input-group-addon input-group-sm">
<span id="id_status" class="bold"></span>
</span>
</div>
<span id="id_error" class="help-block"> </span>
</div>
</div>
<div class="col-md-5">
<div id="level_group" class="form-group">
<label for="level" class="control-label">Degree Level*</label>
<select name="level" id="level" class="form-control" tabindex="20">
<option value="">- Select -</option>
<option value="1">Freshman</option>
<option value="2">Sophomore</option>
<option value="3">Junior</option>
<option value="4">Senior</option>
<option value="5">Masters</option>
<option value="6">DMin</option>
<option value="7">PhD</option>
</select>
<span id="level_error" class="help-block"> </span>
</div>
</div>
<div class="col-md-2"> </div>
</div>
<div class="row">
<div class="col-md-9 col-md-offset-1">
<div id="name_group" class="form-group">
<label for="name" class="control-label">Degree Name*</label>
<div class="input-group">
<input name="name" id="name" type="text" class="form-control" tabindex="30" required pattern="[a-zA-Z ]+" title="Please enter the degree name here" placeholder="degree name" value="">
<span class="input-group-addon input-group-sm">
<span id="name_status" class="bold"></span>
</span>
</div>
<span id="name_error" class="help-block"> </span>
</div>
</div>
<div class="col-md-2"> </div>
</div>
</form>
</div>
<div class="modal-footer">
<button name="CANCEL" id="CANCEL" type="button" class="btn btn-link" tabindex="50" data-dismiss="modal"><span class="glyphicons glyphicons-ban"></span> Cancel & Close</button>
<button name="SUBMIT" id="SUBMIT" type="button" class="btn btn-primary" tabindex="40" form="DEGREE_FORM"><span class="glyphicons glyphicons-upload"></span> Save This Degree</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- InstanceEndEditable -->
</section>
<div class="row">
<button id="TOP" type="button" class="btn btn-xs btn-link" tabindex="32767"><span class="glyphicons glyphicons-up-arrow"></span> Back to Top of Page</button>
</div>
<footer class="row">
© Copyright 2015 by Life Christian University, Inc. • All rights reserved. • Unauthorized duplication of site content is strictly forbidden
<p id="siteseal" style="margin-top: 6px"><span id="siteseal"><script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=zfFa5wE7mSdFUIwGJyK7j2gy8j79He28Y1eOLBZL34xkPov1I8nxgEtNv"></script></span>
</p>
</footer>
</div>
<!-- end #CONTAINER -->
<script language="javascript">
<!-- TemplateBeginEditable name="BottomScript" -->
$('#TOP').on('click', function() {
scrollToTop();
});
<!-- TemplateEndEditable -->
</script>
</body>
<!-- InstanceEnd -->
</html>组件订阅的全局订阅功能。例如。使用React Native附带的HomeScreen模块的API：
Geolocation如果您在设备API和应用之间使用某种自定义位置服务，那么我会为该服务建模一个类似的API。例如，您可以使用React Native附带的class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {locationInfo: {...}};
this._watchID = Geolocation.watchPosition(
(locationInfo) => {this.setState({locationInfo});},
(error) => {...},
...
);
}
componentWillUnmount() {
Geolocation.clearWatch(this._watchID);
}
render() {
...
}
}
库。
现在，如果您绝对必须从EventEmitter获取HomeScreen的实例，那么使用HomeTab道具也是可能的，因为我已经在这个答案中概述：Function to call onRightButtonPress in NavigatorIOS - React Native