Запретить повторную отрисовку элемента на setState в React Native - PullRequest
Новая
       71

Запретить повторную отрисовку элемента на setState в React Native

0 голосов
/ 12 июля 2020

Я использую setState, чтобы динамически обновлять источник изображения при нажатии кнопки в React Native. Тем не менее, я также использую библиотеку TypeWriter, которая печатает текст со специальным анимационным эффектом «пишущая машинка».

Когда мой setState вызывается для изменения элемента и страница перерисовывается, TypeWriter снова печатает текст. Я не хочу этого. Есть ли способ исключить повторную визуализацию моего текста TypeWriter?

Фрагмент кода: 

export const AccountScreen = ({ navigation }) => {

this.state = {
  img1Src: require('../assets/img/token.png')
}

const [state, setState] = useState(this.state);

changeImgSrc = () =>{
  setState({
    img1Src: require('../assets/img/X2.png')
  })
}

return (
        <TypeWriter> //I don't want this to re-render on setState
          <Text>My Account</Text>
        </TypeWriter>

        <Animatable.Image source={state.img1Src}/>

        <Button onPress={this.changeImgSrc}>
            Click me!
        </Button>

etc...//

1 Ответ

1 голос
/ 12 июля 2020 
export const NewComponent = ({ navigation }) => {

const [state, setState] = useState({
  img1Src: require('../assets/img/token.png')
});

changeImgSrc = () =>{
  setState({
    img1Src: require('../assets/img/X2.png')
  })
}

return (
    <Animatable.Image source={state.img1Src}/>

    <Button onPress={this.changeImgSrc}>
        Click me!
    </Button>
    etc...//

Вы можете сделать новый компонент под названием NewComponent. Затем 

export const AccountScreen = ({ navigation }) => {

return (
    <TypeWriter> //I don't want this to re-render on setState
      <Text>My Account</Text>
    </TypeWriter>
    <NewComponent />
 etc...//

Кроме того, вы не можете использовать это в функциональном компоненте. Кроме того, если вы хотите вызвать функцию в функциональном компоненте, вы должны использовать ее с useCallback.

...