标签: react-native-paper

我正在创建一个新的 React Native 应用程序并使用 react-native-paper。这不是一个 Expo 应用程序，而是一个 vanilla react 原生应用程序。

react native 版本 > 0.6.0，我已经按照 react-native-paper 安装https://callstack.github.io/react-native-paper/getting-started.html 中描述的步骤操作

react-native-paper 组件的使用方式如下

<Avatar.Icon size={24} icon="folder" />

但是，当我使用命令运行应用程序时，react-native run-ios编译成功并且应用程序打开但出现红屏如下

我试图弄清楚如何将参数/道具传递给来自 react native paper 的输入，因为 react native 纸没有合适的下拉菜单，所以有一个“菜单”，我很想在我的项目，但文档太糟糕了，没有关于如何从该项目获取元素的示例，也没有将该参数传递给其他地方。

            <TextInput
          style={{width: 300, backgroundColor: 'transparent', margin: 0, padding: 0}}
          label='Email'
          value={Username}
          onChangeText={User => setUsername(User)}
          />

这是菜单，正如你所看到的

          <Provider>
        <Menu
          visible={isOpen}
          onDismiss={() => setOpen(false)}
          anchor={
            <Button style={{marginTop: 25}} color="#8DB600" icon="account" dark={true} mode="contained" onPress={() => setOpen(true)}>
              Ingresar
            </Button>
          }>
            <Menu.Item onPress={() => {}} title="Item 1" />
            <Menu.Item onPress={() => {}} title="Item 2" />
            <Menu.Item onPress={() => {}} title="Item 3" />
        </Menu>
      </Provider>

我的想法是按下锚点上的那个按钮，显示菜单并选择一个项目，该项目将显示在 textinput 上，就像我在这个组件中输入一样

我是原生反应新手，遇到了测试问题。\n首先，我的应用程序运行正常。\n只有当我想用玩笑测试我的应用程序并且我的应用程序中有图标时，才会出现该问题。

以下消息告诉我，可能存在延迟导入加载，在某些方面与笑话冲突，但我不知道如何解决或修复此问题：\nReferenceError: You are trying to 'import' a file after the Jest environment has been torn down.

我已经测试了我的应用程序，icon="camera"并且测试运行良好，因此它与图标非常相关。

该应用程序还使用react-native-paper。

即使应用程序中有图标，我如何测试它？

这是重现该错误的最小 App.js：

import { StatusBar } from 'expo-status-bar';\nimport React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { Provider as PaperProvider } from 'react-native-paper';\nimport { Button } from 'react-native-paper';\n\nexport default function App() {\n  return (\n    <PaperProvider>\n      <View style={styles.container}>\n        <Text>Thi is a test</Text>\n        <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>\n          Press me\n …

我在用着react-native-paper，我想制作一个比正常尺寸更大的按钮，如 gif 所示。

我尝试过同时使用height和padding，但两者都无法正常工作。

您在 gif 中看到的是带有填充的示例。

单击的唯一方法是在中心，在其他地方该事件不会发生。

你能帮我个忙吗？

<Button
          mode="contained"
          labelStyle={{ color: Colors.white }}
          style={{ padding: 30 }}
          onPress={() => console.log('Pressed')}>
          Start
        </Button>

我正在使用react-native-paper DataTable 来布局我的屏幕。到目前为止，一切顺利，但我无法删除分隔表中行的行（DataTable.Row）。你知道该怎么做吗？您可以参考这里的文档

嘿！我是 React Native 开发和使用 expo-cli 的新手。我在我的应用程序中添加了一个react-native-paper数据表，它工作正常，但我有很多字段，我想在水平方向滚动屏幕，但我不明白该由谁来做。请向我建议我可以为这个问题做些什么。

import React from 'react';
import { StyleSheet, Text, View, ScrollView, TextInput, Button, } from 'react-native';
import { Card } from "react-native-shadow-cards";
import {DataTable} from  "react-native-paper"


const AllUsers = () =>{
    return(
        <View>
            <View style={styles.headSection}>
                <Text style={styles.titleHeading}>All Users</Text>
            </View>
            <ScrollView horizontal>
            <DataTable style={styles.table} >
                <DataTable.Header>
                    <DataTable.Title style={styles.header} > <Text style={styles.tableHeading}>Id</Text></DataTable.Title>
                    <DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >Username</Text></DataTable.Title>
                    <DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >First Name</Text></DataTable.Title>
                    <DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >Last Name</Text></DataTable.Title>
                    <DataTable.Title style={styles.header} >  <Text style={styles.tableHeading} …

我有一个react-native-paper TextInput，当我导航到屏幕时（使用react-native-navigation），我想自动聚焦它。我尝试过autoFocus={true}在 TextInput 上进行设置，但没有成功。

在另一次尝试中，我尝试通过监听屏幕上的“焦点”事件来手动聚焦它，但这仅在我第一次打开屏幕时聚焦。有什么办法让它可靠地工作吗？

export default function NewAccountScreen({ navigation }) {
  const [name, setName] = useState('');

  const textInputRef = createRef();

  // This isn't working, neither is autoFocus...
  const focusOnInput = () => {
    textInputRef.current?.focus();
  }

  navigation.addListener("focus", focusOnInput);

  return (
    <View>
      <TextInput ref={textInputRef} label="Account name" value={name} onChangeText={setName}/>
    </View>
  )
}

如何在聚焦时更改 textInput 的标签颜色。我使用 react-native-paper 默认情况下它是紫罗兰色，是否有任何类似 labelColor 的道具来做同样的事情当单击 textInput 进行编辑时，需要更改 TextInput 的标签颜色。详情请看以下代码

import React, {Component} from 'react'
import { View, StyleSheet } from 'react-native'
import { Text, TextInput, Card, Button } from 'react-native-paper'

class login extends Component {
    state = {
        email: '',
        password: ''
    }
    handleEmail = (text) => {
        this.setState({email: text})
    }
    handlePassword = (text) => {
        this.setState({password: text})
    }
    render(){
        return (
            <View style = {styles.container}>
            <View style = {styles.part1}/>
            <View style = {styles.part2}/>
            <View style = {styles.CardContainer}> …

我有这个react-native-paper按钮：

      <Button
        disabled={loading}
        icon="refresh"
        mode="contained"
        onPress={this.refreshData.bind(this)}
      >
        Refresh
      </Button>

如何让图标在 时旋转loading=true？

我无法找到足够的信息来使用 React Native Paper DataTable Pagination。这些文档非常薄弱，而且只有几个关于该主题的视频没有给我提供我需要的信息。

import 'react-native-gesture-handler';
import React, { useEffect, useState } from 'react';
import { View, Text, Button, TextInput, ActivityIndicator } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer'
import { DataTable, page, setPage, setItemsPerPage, optionsPerPage, itemsPerPage } from 'react-native-paper';

const Drawer = createDrawerNavigator();

function SearchComponent() {
  return (
    <View style={{ flex: 1 }}>Search Bar</View>
  );
}

function TableComponent({ headers, values }) {
  if (!headers …