Реагировать родной, проходя события из TabBarIOS через Навигатор IOS

Question

У меня есть проект, который среагировать на 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> 

На вкладке Partners она принимает вас к NavigatorIOS, который выглядит так ...

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

     ) 

который затем принимает вас на страницу под названием партнеров, а затем на странице под названием партнера.

Теперь, когда Навигатор нажат, если страница находится на партнере, я хочу, чтобы она вернулась к Партнерам, но как зарегистрировать четную страницу с вкладкой и отправить ее на страницу партнера? Спасибо, что всегда

Answer 1

Чтобы передать функцию от Партнеров к странице партнера (родительский к ребенку), вы можете сделать это так же, как и передать другое свойство вниз, в качестве опоры. Когда вы используете навигатор, вы должны убедиться, что вы назначили свойство 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;