React原生，通过Navigator IOS从TabBarIOS传递事件

Question

我有一个react项目，它在index.ios上有一个导航器，看起来像这样..

          <TabBarIOS>

        <TabBarIOS.Item 
          title="example List" 
          selected={this.state.selectedTab === "example"}
          icon={require("./App/assets/sassiListIcon.png")}
          onPress={this.sassiHandleChange.bind(this)} >
          <View style={styles.main}>
            <example></example>
          </View>
        </TabBarIOS.Item>

        <TabBarIOS.Item 
          title="partners" 
          selected={this.state.selectedTab === "partners"}
          icon={require("./App/assets/partnersIcon.png")}
          onPress={this.partnersHandleChange.bind(this)} >
          <View style={styles.main}>
            <NavigatePartners></NavigatePartners>
          </View>
        </TabBarIOS.Item>

        <TabBarIOS.Item 
          title="About" 
          selected={this.state.selectedTab === "about"}
          icon={require("./App/assets/aboutIcon.png")}
          onPress={this.aboutHandleChange.bind(this)} >
          <View style={styles.main}>
            <About></About>
          </View>
        </TabBarIOS.Item>

      </TabBarIOS>

在合作伙伴选项卡中，它会将您带到一个NavigatorIOS，如下所示...

        return (
        <NavigatorIOS
      style={styles.mainContainer}
      initialRoute={{
        title: 'Partners',
        component: Partners,
        backButtonTitle: 'Back',
      }}/>

        )

这将把您带到一个名为partner的页面，然后再转到一个名为partner的页面。

现在，当按下导航器时，如果页面在合作伙伴上，我希望它返回到合作伙伴，但我如何从选项卡页注册even并将其发送到合作伙伴页面？一如既往的感谢

Answer 1

要将一个函数从Partners传递到partner页面(父代传给子代)，可以像传递任何其他属性一样，将其作为道具传递。使用导航器时，必须确保将passProps属性分配给导航器。

例如，如果您有一个名为alertClick的函数，下面是如何将其传递给另一个带有导航器的组件：

alertClick() {
    alert('clicked')
  },

  _handlePress() {
    this.props.navigator.push({
      id: 2,
      passProps: {
        alertClick: this.alertClick
      }
    });
  },

所以，如果你想把一个函数从TabBar一直传递到最底层的子组件，你可以这样做：

alertClick() {
  alert('clicked')
}

<TabBarIOS.Item 
      title="partners" 
      selected={this.state.selectedTab === "partners"}
      icon={require("./App/assets/partnersIcon.png")}
      onPress={this.partnersHandleChange.bind(this)} >
    <View style={styles.main}>
      <NavigatePartners alertClick={this.alertClick}></NavigatePartners>
    </View>
</TabBarIOS.Item>

// Then, in Partners

_handlePress() {
  this.props.navigator.push({
    id: 2,
    passProps: {
      alertClick: this.props.alertClick
    }
  });
},

// Then, in partner

<TouchableHighlight onPress={ this.props.alertClick } >

我已经建立了一个完整的工作示例，将passProps分配给导航器，并将函数传递下去，而不使用TabBar here。代码也在下面。

https://rnplay.org/apps/wKX_Dw

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity,
  TouchableHighlight
} = React;

var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;

var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {
  // Make it snap back really quickly after canceling pop
  snapVelocity: 8,
  // Make it so we can drag anywhere on the screen
  edgeHitWidth: SCREEN_WIDTH,
});

var CustomSceneConfig = Object.assign({}, BaseConfig, {
  // A very tighly wound spring will make this transition fast
  springTension: 100,
  springFriction: 1,
  // Use our custom gesture defined above
  gestures: {
    pop: CustomLeftToRightGesture,
  }
});

var PageOne = React.createClass({

  alertClick() {
    alert('clicked')
  },

  _handlePress() {
    this.props.navigator.push({
      id: 2,
      passProps: {
        alertClick: this.alertClick
      }
    });
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
        <Text style={styles.welcome}>Greetings!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go to page two</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

var PageTwo = React.createClass({
  _handlePress() {
    this.props.navigator.pop();
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'purple'}]}>
        <Text style={styles.welcome}>This is page two!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go back</Text>
          </View>
            <TouchableHighlight underlayColor="orange" onPress={ this.props.alertClick } style={{ paddingLeft:10, paddingRight:10, height:60, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', backgroundColor: 'orange', marginTop:20 }}>
                    <View>
                <Text style={{fontSize: 14}}>Function from parent</Text>
                      <Text style={{ fontSize: 22 }}>Click for alert</Text>
              </View>
            </TouchableHighlight>
        </TouchableOpacity>
       </View>
    )
  },
});

var SampleApp = React.createClass({
  _renderScene(route, navigator) {
    if (route.id === 1) {
      return React.createElement(PageOne, Object.assign({navigator}, {...route.passProps}))
    } else if (route.id === 2) {
      return React.createElement(PageTwo, Object.assign({navigator}, {...route.passProps}))
    }
  },

  _configureScene(route) {
    return CustomSceneConfig;
  },

  render() {
    return (
      <Navigator
        initialRoute={{id: 1, }}
        renderScene={this._renderScene}
        configureScene={this._configureScene} />
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'white',
  },
});

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

module.exports = SampleApp;