J'essaie de stocker la valeur de la couleur et la taille de la police que l'utilisateur a entrées, mais mon programme ne stocke pas la valeur, il la change instantanément lorsque l'utilisateur saisit du texte. Je veux qu'il change la police et la couleur d'arrière-plan lorsque vous cliquez sur «Appuyez sur moi». Voici ce que j'ai jusqu'à présent:

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, Button, TouchableOpacity, Alert } from 'react-native';
function Input(props) {
  return (
    <TextInput
      {...props}
      style={{ height: 40, borderWidth: 1, padding: 20, paddingTop: 10, margin: 5 }}
      editable
      maxLength={40}
    />
  );
}
export default function InputMultiline() {
  const [mySize, setMySize] = useState('20');
  const [myBGColor, setMyColor] = useState('yellow');

  const colChange = () => {
    setMyColor(myBGColor);
    setMySize(mySize);
  }

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: myBGColor.toLowerCase(),
        borderBottomColor: '#000000',
        borderBottomWidth: 1,
      }}>
      <Text style={{ fontSize: Number(mySize) }}>Hello</Text>
      <View>
        <Input
          multiline
          numberOfLines={4}
          value={myBGColor}
          onChangeText={colText => setMyColor(colText)}
        /></View>
      <View>
        <Input
          multiline
          numberOfLines={4}
          value={mySize}
          onChangeText={sizeText => setMySize(sizeText)}
        /></View>
      <View style={styles.fixToText}>
        <TouchableOpacity>
          <Button onPress={colChange}
            title="Press Me!"
            color="#841584" />
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 16,
  },
  title: {
    textAlign: 'center',
    marginVertical: 8,
    fontSize: 20
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

Je n'ai aucune idée de comment changer la police et la couleur d'arrière-plan ensemble et cliquez sur «presse moi».

2
coder101 19 oct. 2020 à 14:39

2 réponses

Meilleure réponse

Vous devez ajouter 2 états supplémentaires qui contiendront l'entrée de l'utilisateur:

export default function InputMultiline() {
  const [mySize, setMySize] = useState('20');
  const [myBGColor, setMyColor] = useState('yellow');
  const [mySizeUserInput, setMySizeUserInput] = useState('20');  <---- ADDED
  const [myBGColorUserInput, setMyColorUserInput] = useState('yellow'); <----- ADDED


  const colChange = () => {
    setMyColor(myBGColorUserInput);  <----- CHANGED
    setMySize(mySizeUserInput);   <----- CHANGED
  }

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: myBGColor.toLowerCase(),
        borderBottomColor: '#000000',
        borderBottomWidth: 1,
      }}>
      <Text style={{ fontSize: Number(mySize) }}>Hello</Text>
      <View>
        <Input
          multiline
          numberOfLines={4}
          value={myBGColor}
          onChangeText={colText => setMyColorUserInput(colText)}   <----- CHANGED
        /></View>
      <View>
        <Input
          multiline
          numberOfLines={4}
          value={mySize}
          onChangeText={sizeText => setMySizeUserInput(sizeText)}   <----- CHANGED
        /></View>
      <View style={styles.fixToText}>
        <TouchableOpacity>
          <Button onPress={colChange}
            title="Press Me!"
            color="#841584" />
        </TouchableOpacity>
      </View>
    </View>
  );

Se tu

0
D10S 19 oct. 2020 à 11:47

J'ai pu reproduire le problème avec vos codes, dans mon cas, les styles étaient cassés afin que vous puissiez essayer de changer la vue en supprimant flex et en ajoutant de la hauteur, comme ceci:

<View style={{
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: myBGColor.toLowerCase(),
              height: 100,
            }}>
0
Berke 19 oct. 2020 à 11:53