Это правильный способ получить пользовательский ввод в реагировать родной?

Question

Я хочу получить пользовательский ввод в этой форме и передать его на другие экраны, например, экран профиля. Я также хочу показать входные значения при нажатии кнопки, запускающей функцию onPress.

const SignIn = ({ navigation: { navigate } }) => {

  const [user, setUser] = useState({
    username: '',
    password: '',
  });

  const onPress = () => {
    alert()
  };

  return (
    <Container>
      <Centered>
        <TextInput
          placeholder={placeholders.username}
          name="username"
          autoCapitalize="none"
          value={user.username}
          onChangeText={text => setUser(text)}
        />

        <TextInput
          placeholder={placeholders.password}
          name="password"
          autoCapitalize="none"
          password
          value={user.password}
          onChangeText={text => setUser(text)}
        />
      </Centered>

      <Centered>
        <Button onPress={onPress}>
          <Text color={colors.bright}>{buttons.send}</Text>
        </Button>
      </Centered>

    </Container>
  )
}

export default SignIn;

Answer 1

На самом деле вы обновляете свое состояние неправильно, вы устанавливаете весь объект состояния (имя пользователя и пароль) в качестве значения текстового ввода (имя пользователя или пароль для ввода текста) при изменении значения любого из них. Правильный путь был бы:

const [user, setUser] = useState({
    username: '',
    password: '',
  });
  onPress = () => {
    navigate('ProfileScreen', {username: user.username, password: user.password}) 
  }
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <TextInput
        style={{ borderWidth: 1 }}
        name="username"
        autoCapitalize="none"
        value={user.username}
        onChangeText={text => setUser({ username: text, password: user.password })}
      />
      <TextInput
        style={{ borderWidth: 1 }}
        name="password"
        autoCapitalize="none"
        password
        value={user.password}
        onChangeText={text => setUser({ username: user.username, password: text })}
      />
      <Button style={{ backgroundColor: 'red', height: 100, width: 100 }} onPress={onPress}></Button>
    </View>
)

Другой лучший подход, который я думаю, и вы увидите больше всего, состоит в том, чтобы определить два отдельных состояния, одно для вашего имени пользователя и один пароль, и обновить их отдельно:

  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  onPress = () => {
    navigate('ProfileScreen', {username, password})  
  }
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <TextInput
        style={{ borderWidth: 1 }}
        name="username"
        autoCapitalize="none"
        value={username}
        onChangeText={username => setUsername(username)}
      />
      <TextInput
        style={{ borderWidth: 1 }}
        name="password"
        autoCapitalize="none"
        password
        value={password}
        onChangeText={password => setPassword(password)}
      />
      <Button style={{ backgroundColor: 'red', height: 100, width: 100 }} onPress={onPress}></Button>
    </View>
  )