質問 - 応答ネイティブスクロール可能なタブビューの小道具を渡します

Question

私はリアクションネイティブで作業しています。

これは私のメインメニューコードです。ここから、ユーザーがボタンSOURSをクリックするたびに、私はSoursページに移動し、小道具の金額： '50'を渡したいと思います。 （ここからは何もかもが私が期待どおりに動作）：

import React, { Component } from 'react'; 
import { 
    View, 
    Text, 
    Alert, 
    TouchableOpacity, 
    TouchableHighlight, 
    StyleSheet, 
    Image 
} from 'react-native'; 
import { Container, Header, Title, Button, Icon, Content, Thumbnail } from 'native-base'; 


module.exports = React.createClass({ 
    render() { 
     return (
      <View style={styles.background}> 
      <Container> 
       <Content> 
       <View style={styles.buttonWrapper}> 
        <View style={styles.center}> 
         <TouchableHighlight 
         onPress={() => {this.props.navigator.push({name: 'Sours', amount: '50'})}} 
         style={styles.buttonMain_} 
         underlayColor="#c5e29e" > 
         </TouchableHighlight> 
         <Text style={styles.BtnMainText_}>SOURS</Text> 
        </View> 
       </View> 
       </Content> 
      </Container> 
      </View> 
     ); 
    } 
}) 

これは私のSOURSある - コード。このセクションでは、反応ネイティブスクロール可能なタブビューコンポーネントを使用しています。{this.props.amount}を記録しようとしました。結果はです。 （ここからは、私が期待した通りにすべての作品が動作します）。
そしてI「は./sours_comp/sours'

import React, { Component } from 'React'; 
import { 
    Image, 
    View, 
    StyleSheet, 
} from 'react-native'; 
import Swiper from 'react-native-scrollable-tab-view' 

import TabOne from './sours_comp/sours' 
import TabTwo from './sours_comp/history' 

module.exports = React.createClass({ 
    componentDidMount(){ 
    console.log(this.props.amount); 
    }, 

    render(){ 
    return(
     <View> 
     <Container> 
      <Header> 
      <Button transparent onPress={() => this.props.navigator.pop()}> 
       <Icon name='ios-arrow-back' /> 
      </Button> 
      <Title>Sours</Title> 
      </Header> 

      <Content> 
      <Swiper> 
       <TabOne tabLabel='Sours' > 
       <TabOne amount={this.props.amount} /> // I tried to pass the amount props 
       </TabOne> 
       <TabTwo tabLabel='History' /> 
      </Swiper> 
      </Content> 
     </Container> 
     </View> 
    ) 
    } 
}) 

このTabOneコードセクションでは、私がログインしようとしたにTabOneページにを{this.props.amount}を通過しようとしました{this.props.amount}それは私に結果を与える未定義。

This is my TabOne - Codes. 
import React, { Component } from 'React'; 
import { 
    View, 
    Text, 
    Alert 
} from 'react-native'; 

module.exports = React.createClass({ 
    componentDidMount(){ 
    console.log(this.props.amount); 
    }, 

    render(){ 
    return(
     <View> 
     <Text>Hallo {this.props.amount}</Text> 
     </View> 
    ) 
    } 
}) 

この問題の解決方法を教えてもらえますか？

Answer 1

は解決しよう - 私はこのライン（SOURS.jsコード）でミスを犯したことを実現：

<TabOne tabLabel='Top Up' 
navigator={this.props.navigator} 
topupAmount={this.props.amount} > 
</TabOne> 

：

<TabOne tabLabel='Sours' > 
<TabOne amount={this.props.amount} /> // I tried to pass the amount props 
</TabOne> 

これは私がこの問題を修正する方法であります