2016-04-24 88 views
0

我是新主题。有一个叫BarkodOkuycu的课。在这个类中当barcodeReceived(e)被调用时,我需要在{< Tv />}中更改文本值。我想改变分数值,但不知道如何去做。React-Native如何更新文本值

既然做主题的新手,知道如果有些东西是混乱的或者可以在代码中变得更好,那将是非常好的。

注意:样式在发布问题前已被删除。

import React, { 
     AppRegistry, 
     Component, 
     StyleSheet, 
     Text, 
     ListView, 
     TouchableOpacity, 
     ScrollView, 
     View, 
    } from 'react-native'; 
    import BarcodeScanner from 'react-native-barcodescanner-master'; 


    class barkodOkuyucu extends Component { 

     constructor(props) { 
     super(props); 

     this.state = { 
      torchMode: 'off', 
      cameraType: 'back', 
     barkodNo: '123123', 
      loaded: false, 
     }; 

     } 
    barcodeReceived(e) { 
     console.log('Barcode: ' + e.data); 
     console.log('Type: ' + e.type); 

     } 
     render() { 
     return (
     <View style={styles.container}> 
      <View style={styles.kameraContainer}> 
      <BarcodeScanner onBarCodeRead={this.barcodeReceived} 
      style={styles.kamera} 
      torchMode={this.state.torchMode} 
      cameraType={this.state.cameraType} 

      /> 
      </View> 
      {<Tv/>} 


      <ScrollView 
       ref={(scrollView) => { _scrollView = scrollView; }} 
       automaticallyAdjustContentInsets={false} 
       onScroll={() => { console.log('onScroll!'); }} 
       scrollEventThrottle={200} 
       style={styles.scroolViewStyle}> 
       {THUMBS.map(createThumbRow)} 
      </ScrollView> 
      <TouchableOpacity 
       style={styles.button} 
       onPress={this.butonClick}> 
       <Text>Scroll to top</Text> 
      </TouchableOpacity> 

     </View> 

     ); 

     } 

     butonClick(){ 
     console.log('butonpressed!'); 
     _scrollView.scrollTo({y: 0}); 
     } 

    } 
    var Tv = React.createClass({ 
     getInitialState() { 
      return { 
       score: 0 
      } 
     }, 

     componentDidMount() { 

      this.setState({ 
       score: 6 
      }) 

     }, 
     btnClick(){ 
     this.setState({ score: 16 }); 
     console.log('view clicsa!'); 

     }, 
     render() { 
      return (
       <View style={styles.container2}> 
       <Text style={styles.instructions} > 
       {this.state.score} 
       </Text> 
      </View> 


      ); 
     } 
    }); 
    AppRegistry.registerComponent('barcodOku',() => barcodOku); 
    var THUMBS = ['a','b','c']; 
     THUMBS = THUMBS.concat(THUMBS); // double length of THUMBS 
     var createThumbRow = (uri, i) => <Thumb key={i} uri={uri} />; 
     var Thumb = React.createClass({ 
     shouldComponentUpdate: function(nextProps, nextState) { 
     return false; 
     }, 
     render: function() { 
     return (
      <View style={styles.barkodStyle}> 

       <Text style={styles.barkodTextStyle} >{this.props.uri}</Text> 

      </View> 
     ); 
     } 
    }); 



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

回答

0

阵营原住民完全状态下驱动

this.state = { 
Add this---> data: "", 
Add this---> Type: "" 
     }; 

而且在函数调用

barcodeReceived(e) { 
     this.setState({ 
      data: e.data, 
      Type: e.type 
     }) 
     console.log('Barcode: ' + e.data); 
     console.log('Type: ' + e.type); 
    } 

更新状态,这将更新状态和组件重新呈现更新的价值。 (ReactJS - Does render get called any time "setState" is called?

+0

我需要在var Tv中更新分数变量。 –