は、これが私の唯一のコンポーネントであるネイティブ

Question

に反応：

今

import React from 'react'; 
import { View, ListView, StyleSheet, Text } from 'react-native'; 
import Row from './row' 
import TimerMixin from 'react-timer-mixin'; 


const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    marginTop: 20, 
    }, 
}); 


class ListViewDemo extends React.Component { 

updateState(){ 
    console.log("stae updation") 
    } 
componentDidMount() { 
     console.log("mount"); 
     //timer.setTimeout(this, this.updateState, 1000); 

    } 

componentWillUnmount() { 
    console.log("unmount"); 
    //timer.clearTimeout(this); 
    } 

    constructor(props) { 
    super(props); 

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    let data = [{ 
     "name": { 
     "symbol": "Hello", 
     "tick": 1 
    }}, 
    { 
     "name": { 
     "symbol": "World", 
     "tick": 0 
    }}] 

    this.state = { 
     dataSource: ds.cloneWithRows(data), 
    }; 
    } 
    render() { 
    return (
     <ListView 
     style={styles.container} 
     dataSource={this.state.dataSource} 
     renderRow={(data) => <Row {...data} />} 
     /> 
    ); 
    } 
} 

export default ListViewDemo; 

、私はタイマーの内側に1秒ごとにそれを増分することによって、行のティッカーのそれぞれを更新します。私が直面している問題のカップルは、状態を更新し、es6のために動作するmixinライブラリを得ることができる関数をバインドしています。助けてください。

Answer 1

これは、Startを押した後、すべての行で情報が更新され、TimerMixinを使用する実例です。

私は、この作業をすばやく行うために、いくつかの追加のvarsを使用しました。

dataSourceから（updatedData varを使用せずに）直接データを抽出することは可能かもしれませんが、まだ発見していません。

import React from 'react'; 
import { View, ListView, StyleSheet, Text, TouchableHighlight } from 'react-native'; 
import TimerMixin from 'react-timer-mixin'; 



const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     marginTop: 20, 
    }, 
    button: { 
     justifyContent: 'center', 
     alignItems: 'center', 
     borderWidth: 1, 
     borderRadius: 5, 
     padding: 5, 
     borderColor: 'black', 
     marginTop: 10, 
     height: 40 
    }, 
    buttonText: { 
     flex: 1, 
     alignSelf: 'center', 
     fontSize: 20 
    } 
}); 


class ListViewDemo extends React.Component { 

    constructor(props) { 
     super(props); 

     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
     let data = [{ 
      "name": { 
       "symbol": "Hello", 
       "tick": 1 
      }}, 
      { 
       "name": { 
        "symbol": "World", 
        "tick": 0 
       }}] 

     this.state = { 
      timerStarted: false, 
      updatedData: data, 
      dataSource: ds.cloneWithRows(data), 
     }; 

    } 

    onTimerStart() { 
     if (this.state.timerStarted) { 
      this.setState({timerStarted: false}); 
      return TimerMixin.clearInterval(this.state.timer); 
     } 

     var timer = TimerMixin.setInterval(
      () => { 
       data = [{ 
        "name": { 
         "symbol": "Hello", 
         "tick": this.state.updatedData[0].name.tick+1 
        }}, 
        { 
         "name": { 
          "symbol": "World", 
          "tick": this.state.updatedData[1].name.tick+1 
         }}] 
       this.setState({ 
        timerStarted: true, 
        updatedData: data, 
        dataSource: this.state.dataSource.cloneWithRows(data) 
       }) 
      }, 1000 
     ) 

     this.setState({timer: timer}); 
    } 

    render() { 
     return (
      <View> 
       <ListView 
        dataSource={this.state.dataSource} 
        renderRow={(rowData) => <Text> {rowData.name.symbol} {rowData.name.tick}</Text> } 
       /> 
       <TouchableHighlight style={styles.button} 
        underlayColor={'gray'} 
        onPress={this.onTimerStart.bind(this)}> 
        <Text style={styles.buttonText}>Start</Text> 
       </TouchableHighlight> 
      </View> 

     ); 
    } 

} 


export default ListViewDemo;