写react native代码时出现了无限次循环的错误

错误报告：Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

以下为部分源代码

import {Button, Dialog, Input} from '@rneui/base';
import React, {useState, ref} from 'react';
import {View, Text, TextInput, StyleSheet} from 'react-native';
//import Input from '../../components/input';

const Login = () => {
  const [text, setText] = useState('');
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [visible, setVisible] = useState(false);

  const toggleDialog = () => {
    setVisible(!visible);
  };

  const login = (code, phone) => {
    setVisible(false);
  };
  return (
    <View style={{padding: 10}}>
      <Text>MinInsight</Text>
      <Input placeholder="请输入手机号" style={{height: 40}}></Input>
      {/* <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text
          .split(' ')
          .map(word => word && '🍕')
          .join(' ')}
      </Text> */}
      <Button onPress={toggleDialog}>获取验证码</Button>
      <Text>其他方式登录</Text>
      <View>
        <Text>icon</Text>
        <Text>icon</Text>
      </View>
      <Dialog
        style={styles.dialog}
        isVisible={visible}
        onBackdropPress={toggleDialog}>
        <Dialog.Title title="请输入验证码" />
        <Input placeholder="验证码"></Input>
        <Text style={styles.dialog}>验证码错误，请重新输入</Text>
        <Button onPress={login(code,phone)}>登录</Button>
      </Dialog>
    </View>
  );
};

const styles = StyleSheet.create({
  dialog: {
    backgroundColor: 'red',
  },
});

export default Login;

错误原因：这里直接调用了login(code, phone)函数并将其结果作为onPress的处理程序。这将导致在每次渲染时都会调用login函数，从而导致无限循环渲染和"Too many re-renders"错误。

<Button onPress={login(code,phone)}>登录</Button>

解决办法：将onPress的处理程序更改为一个匿名函数，以确保它只在按钮被按下时调用：

<Button onPress={() => login(code, phone)}>登录</Button>