React-native-paper 上的 TextInput 不工作

Question

我想从 react native paper 获得关于 Card 的输入。我尝试将 textInput 放入卡中，card.title、card.content 或 card.actions，但它不起作用，我做错了什么？有什么解决办法吗？这是我正在处理的代码：

import React, {useState} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {
  TouchableRipple,
  Switch,
  Title,
  Card,
  TextInput,
  Paragraph,
  Button,
  Avatar,
} from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

function Details() {
  return (
    <Card
      style={{
        elevation: 24,
        borderRadius: 24,
        marginTop: 70,
        backgroundColor: '#fafcff',
        padding: 18,
        margin: 18,
      }}><View>
           <TextInput label="Email"
          mode="outlined"
          dense={true}
          // ref={textInput.current.clear()}
          theme={{
            colors: {
              primary: '#00aaff',
            },
          }}
          
          style={{
            borderRadius: 20,
            borderColor: 'gray',
            borderLeftWidth: 1,
            borderBottomEndRadius: 30,
            borderBottomStartRadius: 30,
            borderTopStartRadius: 30,
            borderStyle: 'dashed',
            borderTopColor: 'gray',
            borderTopEndRadius: 0,
            borderTopWidth: 0,
            borderStartColor: 'green',
            borderEndColor: 'green',
            borderRightColor: 'green',
            borderLeftColor: 'green',
            fontSize: 25,
            opacity: 0.9,
            shadowColor: '#00aaff',
            shadowOffset: {
              width: 0,
              height: 12,
            },
            shadowOpacity: 0.58,
            shadowRadius: 16.0,

            elevation: 24,
          }}
          
          />
        </View>
      <Card.Content>
        <Title>Card title</Title>
          
      </Card.Content>
      {/* <Card.Cover source={{uri: 'https://picsum.photos/700'}} /> */}
      <Card.Actions>
        
     
         
          
      </Card.Actions>
    </Card>
  );
}

export default Details;

我可以看到标签 Email 和 TextBox，但我无法在文本框中写入任何文本，我该怎么办？这是上述代码的输出：

Answer 1

尝试将您的 TextInput 包含在 Portal 中，例如：

<Card>
    ....
    <Portal>
        <TextInput />
    </Portal>
</Card>

React-native-paper 上的 TextInput 不工作

TextInput on React-native-paper is not working

react-native

react-native-android

react-native-navigation

react-native-textinput

react-native-paper