React Native实现点击按钮弹出带输入框的自定义弹窗方法问询

方案一：自定义带输入框的弹窗（使用Modal组件） #

React Native原生Alert组件不支持输入框，我们可以用内置Modal组件实现完全可控的自定义弹窗，自由定义样式和功能。

实现步骤： #

• 导入Modal、View、TextInput等基础组件
• 定义状态控制弹窗显隐和输入框内容
• 编写弹窗UI结构，包含输入框与操作按钮
• 绑定按钮点击事件，切换弹窗状态

代码示例： #

import React, { useState } from 'react';
import { View, Modal, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';

const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const toggleModal = () => {
    setIsModalVisible(!isModalVisible);
    if (isModalVisible) setInputValue('');
  };

  const handleSubmit = () => {
    console.log('输入内容：', inputValue);
    // 这里可添加输入内容的业务逻辑，比如提交存储
    toggleModal();
  };

  return (
    <View style={styles.container}>
      {/* 触发弹窗按钮 */}
      <TouchableOpacity style={styles.openButton} onPress={toggleModal}>
        <Text style={styles.buttonText}>打开带输入框的弹窗</Text>
      </TouchableOpacity>

      {/* 自定义弹窗 */}
      <Modal
        visible={isModalVisible}
        transparent={true}
        animationType="slide"
        onRequestClose={toggleModal}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>请输入内容</Text>
            <TextInput
              style={styles.input}
              placeholder="在这里输入..."
              value={inputValue}
              onChangeText={setInputValue}
              autoFocus={true}
            />
            <View style={styles.buttonContainer}>
              <TouchableOpacity style={styles.cancelButton} onPress={toggleModal}>
                <Text style={styles.cancelButtonText}>取消</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.confirmButton} onPress={handleSubmit}>
                <Text style={styles.confirmButtonText}>确认</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  openButton: {
    backgroundColor: '#2196F3',
    padding: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '500',
  },
  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContent: {
    width: '80%',
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 20,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 16,
    textAlign: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: 10,
    marginBottom: 20,
    fontSize: 16,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    gap: 12,
  },
  cancelButton: {
    padding: 8,
  },
  cancelButtonText: {
    color: '#666',
    fontSize: 16,
  },
  confirmButton: {
    backgroundColor: '#2196F3',
    padding: 8,
    borderRadius: 6,
  },
  confirmButtonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default App;

方案二：跳转至新视图（使用React Navigation） #

如果不需要弹窗形式，可直接跳转到独立页面获取输入，更符合原生应用导航逻辑。

实现步骤： #

1. 安装依赖：@react-navigation/native、@react-navigation/native-stack
2. 配置导航容器，定义主页面与输入页面路由
3. 主页面添加跳转按钮，点击触发页面跳转
4. 输入页面处理输入逻辑，完成后返回主页面

代码示例： #

导航配置（App.js）

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './HomeScreen';
import InputScreen from './InputScreen';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Input" component={InputScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

主页面（HomeScreen.js）

import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity 
        style={styles.button} 
        onPress={() => navigation.navigate('Input')}
      >
        <Text style={styles.buttonText}>跳转到输入页面</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '500',
  },
});

export default HomeScreen;

输入页面（InputScreen.js）

import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';

const InputScreen = ({ navigation }) => {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = () => {
    console.log('输入内容：', inputValue);
    // 可携带数据返回主页面：navigation.navigate('Home', { input: inputValue })
    navigation.goBack();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>请输入内容</Text>
      <TextInput
        style={styles.input}
        placeholder="在这里输入..."
        value={inputValue}
        onChangeText={setInputValue}
        autoFocus={true}
      />
      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.cancelButton} onPress={() => navigation.goBack()}>
          <Text style={styles.cancelButtonText}>取消</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.confirmButton} onPress={handleSubmit}>
          <Text style={styles.confirmButtonText}>确认</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 20,
    fontWeight: '600',
    marginVertical: 20,
    textAlign: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: 12,
    backgroundColor: 'white',
    marginBottom: 30,
    fontSize: 16,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    gap: 15,
  },
  cancelButton: {
    padding: 10,
  },
  cancelButtonText: {
    color: '#666',
    fontSize: 16,
  },
  confirmButton: {
    backgroundColor: '#2196F3',
    padding: 10,
    borderRadius: 8,
  },
  confirmButtonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default InputScreen;

内容的提问来源于stack exchange，提问作者Francisco Reinaudo