Question

我把这个Ask / Answer应用程序放在一起，遇到了这个障碍：

我想从navigationBar触发场景中的一个功能。与Login应用程序类似，我在NavigationBar中有一个按钮来提交答案：

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（route，navigator）看起来像这样：

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

当然还有＆＃34; TextInputView＆＃34;组件我有一个＆＃34; submitSolution＆＃34;功能...

问题是如果我在场景中并按下＆＃34;完成＆＃34; - 我总是得到：＆＃34; undefined不是对象（评估＆＃39; _this2.refs.TextInputView＆＃39;）

一如既往：感谢您的帮助

Answer 1

嗯，你可以通过在场景中保留与提交相关的所有内容来实现。

如何？

您可以通过按需在导航栏中按下按钮来执行此操作。

这是我为我正在开展的项目创建的解决方案： 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);

React-native：将场景绑定到NavigationBar

1 个答案: