Как изменить свойство компонента в функции?

Я пытаюсь научиться реагировать и использовать сторонние компоненты, сейчас я пытаюсь использовать компонент, который я установил из https://www.npmjs.com/package/react.-native-countdown-component

цель:

Компонент «Обратный отсчет» имеет «Реквизит», называемый «работа», который я хотел бы изменить, когда я «щелкаю» по компоненту.

код:

код, который я использую, — это просто новое новое приложение, созданное с использованием «expo init MyApp», затем я вставил код для импорта и создания компонента.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>

      <CountDown
        until={60}
        size={30}
        //onFinish={() => alert('Finished')}
        digitStyle={{backgroundColor: '#FFF'}}
        digitTxtStyle={{color: '#1CC625'}}
        timeToShow={['M', 'S']}
        timeLabels={{m: '', s: ''}}
        showSeparator={true}      
        onPress={() =>
          {
            this.setState({running:true});
          }}
          running={false}
        />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

как правильно изменить свойство «running» компонента Countdown при нажатии на компонент?


react-native countdown pause
person Robson    schedule 20.06.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете начать правильно использовать состояние. На этот раз я буду использовать React Hooks, это проще, чем использование традиционных функциональных или классовых компонентов. Подробнее

Каждый раз, когда состояние обновляется, компонент перерисовывается с новым значением.

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';

export default function App() {
  const [isRunning, setRunning] = useState(false) //React Hooks
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <CountDown
        until={60}
        size={30}
        //onFinish={() => alert('Finished')}
        digitStyle={{backgroundColor: '#FFF'}}
        digitTxtStyle={{color: '#1CC625'}}
        timeToShow={['M', 'S']}
        timeLabels={{m: '', s: ''}}
        showSeparator={true}      
        //When component is pressed, updates state to true
        onPress={() => { setRunning(true); }}
        running={isRunning} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
person Ian Vasco    schedule 20.06.2019
comment
благодарю вас!!! Я изменил событие onPress, чтобы оно работало как переключатель, onPress={() =› { setRunning(!isRunning); }} - person Robson; 20.06.2019

arrow_upward
0
arrow_downward

Я нашел другой способ, для которого требуется новый класс, но я предпочитаю ответ Яна Стебана Васко.

решение, которое я обнаружил, состояло в том, чтобы создать новый компонент, который будет содержать «состояние» для компонента обратного отсчета, а затем использовать компонент MyCountdown в основном методе вместо прямого использования компонента обратного отсчета.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';
export default class MyCountdown extends React.Component{
    state = {
        running: false
    };
    handleOnPress = () =>{
        this.setState({running:!this.state.running});
    }
    render(){
        return (
            <CountDown
                until={60}
                size={30}
                //onFinish={() => alert('Finished')}
                digitStyle={{backgroundColor: '#FFF'}}
                digitTxtStyle={{color: '#1CC625'}}
                timeToShow={['M', 'S']}
                timeLabels={{m: '', s: ''}}
                showSeparator={true}      
                onPress={this.handleOnPress}
                running={this.state.running}
              />
        );
    }
}
person Robson    schedule 20.06.2019