Question

所以我正在使用React Native，

这是我的主菜单代码。从这里，每次用户点击按钮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 - 代码。在本节中，我使用 react-native-scrollable-tab-view 组件，我尝试记录 {this.props.amount} ，它给了我结果 50 即可。（从这里，每个人都按照我的预期工作）然后我尝试将 {this.props.amount} 传递给'。/ sours_comp / sours'中的TabOne页面

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代码部分中，我尝试记录 {this.props.amount} ，它为我提供了结果 undefined 。

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='Sours' >
 <TabOne amount={this.props.amount} />  // I tried to pass the amount props
</TabOne>

这就是我解决这个问题的方法：

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

Ask - 在react-native-scrollable-tab-view中传递props

1 个答案: