Блог

Я пытаюсь сохранить значение цвета и размера шрифта, которые ввел пользователь, но моя программа не сохраняет значение, она мгновенно изменяет его, когда пользователь вводит текст. Я хочу, чтобы он менял шрифт и цвет фона при нажатии кнопки «press me». Вот что я до сих пор:

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

Я понятия не имею, как изменить шрифт и цвет фона вместе и нажать «press me».

Вы должны добавить еще 2 состояния, которые будут содержать ввод пользователя:

 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

Я смог воспроизвести проблему с вашими кодами, в моем случае стили были нарушены, поэтому вы можете попытаться изменить вид, удалив flex и добавив высоту, например:

 <View style={{
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: myBGColor.toLowerCase(),
              height: 100,
            }}>