リアクトネイティブ：NavigationBar

Question

に結合するシーンを、私は一緒にこの依頼/回答のAppを入れており、このハードルを越えてきたよ：

私はnavigationBarからのシーンで機能を起動します。ログインアプリと同様に、私は答え提出するNavigationBarでボタンを持っている：「TextInputView」で

if (route.name == 'TextInputView'){ 
    return <TextInputView ref="TextInputView" navigator={navigator} {...route.passProps}/> 
} 

そしてもちろん：

RightButton(route, navigator, index, navState) { 
    if (route.name=='TextInputView'){ 
    return <TouchableHighlight 
      underlayColor="transparent" 
      style={{ marginRight:13, marginTop:0}} 
      onPress={() => this.refs.TextInputView.submitSolution()}> 
     <Text style={ styles.leftNavButtonText }>Done</Text> 
     </TouchableHighlight> 
    } 

renderscene（ルート、ナビゲーターは）そうのように見えますコンポーネント私は "submitSolution"関数を持っています...

問題は私がシーンにいて "完了"を押している - 私はいつも得ます： "未定義はオブジェクトではありません（評価 '_this2.refs.TextInputView '）

いつもありがとう：あなたのおかげです。

Answer 1

まあ、あなたは、それ自体、送信に関連するすべてをシーン自体に保存することによってそれを行うことができます。

どのようにですか？

オンデマンドでnavbarにボタンを挿入することで行います。

ここで私は私が働いているプロジェクトのために作成したソリューションです： https://rnplay.org/apps/dS31zw

アイデアはラベルと機能（と何でもあなたが好きを持つオブジェクトでナビゲーションバーのルートを提供することです..例えば、アイコン）

ボーナスとして、あなたもタイトルを挿入することができます！

注：このトリックは、NavigationBarRouteMapperが機能する前に呼び出されるcomponentWillMount（）に依存します。これが将来的に変わるなら、間違いなくそれを破るでしょう。しかし、それは今完璧に動作します！

'use strict'; 

import React, {Component} from 'react'; 
import ReactNative from 'react-native'; 

const { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Navigator, 
    Alert, 
    TouchableHighlight 
} = ReactNative; 

class Home extends Component { 

    //This trick depends on that componentWillMount fires before the navbar is created 
    componentWillMount() { 
     this.props.route.navbarTitle = "Home"; 

     this.props.route.rightNavButton = { 
      text: "Button", 
      onPress: this._doSomething.bind(this) 
     }; 
    } 

    _doSomething() { 
    Alert.alert(
     'Awesome, eh?', 
     null, 
     [ 
     {text: 'Indeed'}, 
     ] 
    ) 
    } 

    render() { 
    return (
     <View style={styles.container}> 
      <Text>You are home</Text> 
     </View> 
    ); 
    } 
} 

class AppContainer extends Component { 

    renderScene(route, navigator) { 
     switch(route.name) { 
      case "Home": 
     //You must pass route as a prop for this trick to work properly 
      return <Home route={route} navigator={navigator} {...route.passProps} /> 
      default: 
      return (
     <Text route={route} 
     style={styles.container}> 
      Your route name is probably incorrect {JSON.stringify(route)} 
      </Text> 
    ); 
     } 
    } 

    render() { 
    return (
     <Navigator 
     navigationBar={ 
      <Navigator.NavigationBar 
      style={ styles.navbar } 
      routeMapper={ NavigationBarRouteMapper } /> 
     } 

     initialRoute={{ name: 'Home' }} 
     renderScene={ this.renderScene } 

     /> 
    ); 
    } 
} 

//Nothing fancy here, except for checking for injected buttons. 
var NavigationBarRouteMapper = { 
    LeftButton(route, navigator, index, navState) { 
    if(route.leftNavButton) { 
     return (
     <TouchableHighlight 
     style={styles.leftNavButton} 
     underlayColor="transparent" 
     onPress={route.leftNavButton.onPress}> 
      <Text style={styles.navbarButtonText}>{route.leftNavButton.text}</Text> 
     </TouchableHighlight> 
    ); 
    } 
    else if(route.enableBackButton) { 
     return (
     <TouchableHighlight 
     style={styles.leftNavButton} 
     underlayColor="transparent" 
     onPress={() => navigator.pop() }> 
      <Text style={styles.navbarButtonText}>Back</Text> 
     </TouchableHighlight> 
    ); 
    } 
    }, 
    RightButton(route, navigator, index, navState) { 
    if(route.rightNavButton) { 
     return (
     <TouchableHighlight 
     style={styles.rightNavButton} 
     underlayColor="transparent" 
     onPress={route.rightNavButton.onPress}> 
      <Text style={styles.navbarButtonText}>{route.rightNavButton.text}</Text> 
     </TouchableHighlight> 
    ); 
    } 
    }, 
    Title(route, navigator, index, navState) { 
    return (<Text style={styles.navbarTitle}>{route.navbarTitle || route.name}</Text>); 
    } 
}; 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    marginTop: 66 
    }, 
    navbar: { 
    backgroundColor: '#ffffff', 
    }, 
    navbarTitle: { 
    marginVertical: 10, 
    fontSize: 17 
    }, 
    leftNavButton: { 
    marginVertical: 10, 
    paddingLeft: 8, 
}, 
    rightNavButton: { 
    marginVertical: 10, 
    paddingRight: 8, 
    }, 
    navbarButtonText: { 
    fontSize: 17, 
    color: "#007AFF" 
    } 
}); 

AppRegistry.registerComponent('AppContainer',() => AppContainer);