Question

我是这个话题的新手。有一个名为BarkodOkuycu的课程。在这个类中，当调用barcodeReceived（e）时，我需要更改{＆lt;电视/＆GT;}。我想改变分数值，但不知道该怎么做。

由于成为主题的新手，如果知道某些东西是混乱的还是可以在代码中变得更好，那将是很好的。

注意：在发布问题之前删除了样式。

   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);

Answer 1

React Native完全由状态驱动

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

并在函数调用上更新State

   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?）

React-Native如何更新文本值

1 个答案: