我正在使用路由器助焊器做一个应用程序。一切正常，直到我遇到这个问题。我不知道如何将一个参数从表单传递到工具栏（用户应该按下发送按钮）。以下是路由器的定义位置：
export default class App extends Component {
render() {
return (
<Router>
<Scene key="root" hideNavBar={true}>
<Scene key="SplashPage" component={SplashPage} initial={true} panHandlers={null}/>
<Scene key="drawer" component={NavigationView} open={false} direction="vertical">
<Scene key="main" hideNavBar={false}>
<Scene key="MainPage" component={MainPage} search="" title={I18n.t("nautal")} mainIcon="menu" secondaryIcon={["search"]} mainAction={()=>Actions.refresh({key: 'drawer', open: value => !value })} secondaryAction={()=>Actions.SearchBoatsPage()} navBar={MyToolbar} panHandlers={null}/>
<Scene key="CheckListPage" component={CheckListPage} title={I18n.t("checklist")} navBar={MyToolbarEmpty} panHandlers={null}/>
<Scene key="MeteoPage" component={MeteoPage} title={I18n.t("meteo")} mainIcon="menu" secondaryIcon={["search","done"]} navBarSearch={true} mainAction={()=>Actions.refresh({key: 'drawer', open: value => !value })} navBar={MyToolbar} panHandlers={null}/>
<Scene key="InfoPortsPage" component={InfoPortsPage} title={I18n.t("infoPorts")} navBar={MyToolbar} mainIcon="menu" secondaryIcon={["search","done"]} mainAction={()=>Actions.refresh({key: 'drawer', open: value => !value })} navBarSearch={true} panHandlers={null}/>
<Scene key="ToolsPage" component={ToolsPage} title={I18n.t("tools")} navBar={MyToolbarEmpty} panHandlers={null}/>
<Scene key="SearchBoatsPage" component={SearchBoatsPage} title={I18n.t("searchBoats")} mainIcon="arrow-back" secondaryIcon={["done"]} mainAction={()=>Actions.pop()} secondaryAction={()=>Actions.MainPage()} navBar={MyToolbar} panHandlers={null}/>
<Scene key="CompassPage" component={CompassPage} title={I18n.t("compass")} navBar={MyToolbarEmpty} panHandlers={null}/>
<Scene key="MOBPage" component={MOBPage} title={I18n.t("manOverboard")} navBar={MyToolbarEmpty} panHandlers={null}/>
</Scene>
</Scene>
</Scene>
</Router>
)
}
}
这是工具栏组件（带有发送按钮）：
import React, { Component } from 'react';
import {StyleSheet, View, Text, TextInput, Dimensions} from 'react-native';
import {Toolbar} from 'react-native-material-design';
import I18n from '../core/Translations';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Kohana } from 'react-native-textinput-effects';
import { Actions } from 'react-native-router-flux';
var {height, width} = Dimensions.get('window');
class MyToolbar extends Component {
constructor(props) {
super(props);
this.state = {
tabBarSearch: false,
counter: false,
secondIcon: this.props.secondaryIcon[0]
};
this.pressButton = this.pressButton.bind(this);
}
pressButton() {
if(typeof this.props.secondaryAction!="undefined"){
this.props.secondaryAction();
}
if(this.props.navBarSearch){
var icon = (!this.state.counter) ? this.props.secondaryIcon[1] : this.props.secondaryIcon[0];
this.setState({
tabBarSearch: !this.state.tabBarSearch,
secondIcon: icon,
counter: !this.state.counter
});
}
}
render() {
return (
<View style={{position: 'absolute', top: 0, flex: 1, alignSelf: 'stretch', right: 0, left: 0}}>
<Toolbar
title={(this.state.tabBarSearch) ? null : this.props.title}
icon={this.props.mainIcon}
onIconPress= {this.props.mainAction}
actions={[{
icon: this.state.secondIcon,
onPress: this.pressButton
}]}
overrides={{backgroundColor: '#015B83'}}
rightIconStyle={{
margin: 10
}}
>
<Kohana
style={{ backgroundColor: '#015B83' }}
iconClass={Icon}
iconName={'search'}
iconColor={'white'}
labelStyle={{ color: 'white', fontSize: 20}}
inputStyle={{ color: 'white', fontSize: 20, fontWeigth:'bold' }}
autoFocus={true}
placeholder={'Search'}
placeholderTextColor ={'#aaa'}
/>
</Toolbar>
</View>
)
}
}
module.exports = MyToolbar;
以下是表单（用户输入要发送的数据）：
import React, { Component } from 'react';
import { View, Text, StatusBar, Dimensions, ScrollView } from 'react-native';
import { Actions } from 'react-native-router-flux';
import DrawerLayout from 'react-native-drawer-layout';
import TextField from 'react-native-md-textinput';
import {Button } from 'react-native-material-design';
import NavigationView from '../Components/NavigationView';
import MyToolbarEmpty from '../Components/MyToolbarEmpty';
import MyToolbar from '../Components/MyToolbar';
import I18n from '../core/Translations';
import STYLES from '../core/Styles';
import GLOBAL from '../core/Global';
var {height, width} = Dimensions.get('window');
export default class SearchBoatsPage extends Component {
constructor(props) {
super(props);
this.state = {
country:'',
area:'',
duration:'',
startDate:''
};
this.searchData = this.searchData.bind(this);
}
searchData(){
var search = {country:this.state.country, area:this.state.area, duration:this.state.duration, startDate:this.state.startDate};
Actions.MainPage({search: search});
}
render() {
const goToPageTwo = () => Actions.CheckListPage({text: 'Hello World!'});
const openDrawer = () => Actions.refresh({key: 'drawer', open: value => !value });
return (
<View>
<StatusBar
hidden={false}
backgroundColor='#096f9c'
/>
<ScrollView>
<View style={STYLES.container}>
<View style={STYLES.subContainer}>
<TextField onChangeText={country => this.setState({country})} label={ I18n.t("country") } highlightColor={'#08AE9E'} value={this.state.country}/>
<TextField onChangeText={area => this.setState({area})} label={ I18n.t("area") } highlightColor={'#08AE9E'} value={this.state.area}/>
<TextField onChangeText={duration => this.setState({duration})} label={ I18n.t("duration") } highlightColor={'#08AE9E'} value={this.state.duration}/>
<TextField onChangeText={startDate => this.setState({startDate})} label={ I18n.t("startDate") } highlightColor={'#08AE9E'} value={this.state.startDate}/>
</View>
<View style={STYLES.bottomButton}>
<Button
onPress={this.searchData}
text={ I18n.t("search") }
theme = 'dark'
textColor = 'white'
raised={true}
overrides={{backgroundColor: '#08AE9E', rippleColor:'#39beb1'}}
/>
</View>
</View>
</ScrollView>
</View>
)
}
_setDrawer() {
this.refs['DRAWER'].openDrawer();
}
}
总结一下，我想将表格中的参数发送到工具栏，这样我就可以通过按工具栏上的按钮发送表格信息。