标签: react-native-paper

首先，我研究了其他帖子并找到了很多解决方案，但在 React Native Paper 中没有任何效果？

我需要在 React Native Paper 中更改 TextInput Style on Focus

我正在开发一个需要搜索栏的 React Native Android 应用程序。我正在使用react-native-paper中的SearchBar，我检查了他们的文档，但找不到任何方法来查找用户是否按下了键盘上的小搜索按钮。

不确定此输入或按钮本身是否有正式名称，因为我不熟悉移动应用程序开发，但这里是应用程序的屏幕截图，以防不清楚。我指的是键盘本身上的搜索按钮，在本例中为蓝色。

通过一些挖掘，我发现 React Native 中的 TextInputs 有一个 onSubmitEditing={} ，可以触发您想要的任何返回键操作。

本质上我想知道react-native-paper中是否有SearchBar的等效道具。

我有：

<PaperProvider theme={theme}>
  <NavigationContainer>
    <Tab.Navigator initialRouteName="Feed">
      <Tab.Screen
        name="Home"
        component={Conversations}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="home" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Explore"
        component={Conversations}
        options={{
          tabBarLabel: "Explore",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="find" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Conversations}
        options={{
          tabBarLabel: "Profile",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="setting" size={size} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  </NavigationContainer>
</PaperProvider>;

它加载良好，但我无法滚动。我也在react-native-web尝试使其与网络兼容。

我想在初始状态（不是 onFocus）调整概述的react-native-paper TextInput 标签颜色。这是我的 OutlinedInput 组件：

import * as React from 'react';
import { TextInput } from 'react-native-paper';

const OutlinedInput = (props) => {
  return (
    <TextInput
      mode='outlined'
      label={props.label}
      placeholder={props.placeholder}
      placeholderTextColor='white'
      secureTextEntry={props.secureTextEntry}
      multiline={props.multiline}
      keyboardType={props.keyboardType}
      value={props.value}
      onChangeText={(value) => props.onChangeText(value)}
      style={props.style}
      theme={props.theme}
    />
  );
};

export default OutlinedInput;

在我的 Register 组件中，我在其中创建了一个 OutlinedInput 组件：

<View style={{ justifyContent: 'center', alignItems: 'center' }}>
  <OutlinedInput
    label={'User Name'}
    value={userName}
    onChangeText={(userName) => setUserName(userName)}
    style={{ color: 'white', backgroundColor: 'rgb(35,39,42)',
            borderRadius: 5, width: '75%', height: '5%' 
    }}
    theme={{ colors: { …

默认情况下，列是排列的，如果我尝试为单元格和标题提供宽度，结果没有变化。那么如何明确地安排列宽呢？

  <DataTable style={{ height: height }}>
        <DataTable.Header>
            <DataTable.Title>Name</DataTable.Title>
            <DataTable.Title numeric>QTY</DataTable.Title>
            <DataTable.Title numeric>AMT</DataTable.Title>
            <DataTable.Title numeric>TAX</DataTable.Title>
            <DataTable.Title numeric>GROSS</DataTable.Title>
        </DataTable.Header>
        <ScrollView>
            {
                data && data.length > 0 ?
                    data.map((item, index) => {
                        return (
                            <DataTable.Row key={index}>
                                <DataTable.Cell>{item.NAME}</DataTable.Cell>
                                <DataTable.Cell numeric>{item.QTY}</DataTable.Cell>
                                <DataTable.Cell numeric>{item.AMT}</DataTable.Cell>
                                <DataTable.Cell numeric>{item.TAX}</DataTable.Cell>
                                <DataTable.Cell numeric>{item.GROSS}</DataTable.Cell>
                            </DataTable.Row>
                        );
                    })
                    :
                    false
            }
        </ScrollView>
    </DataTable>

我想在组件内的样式表创建函数中使用来自我的本机纸张主题的颜色。这是我的代码

import { StyleSheet, Text, View } from 'react-native';
import { useTheme } from 'react-native-paper';

const Home = () => {
  const { colors } = useTheme();

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <Text>Home Page</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


export default Home;

我想在样式表中使用 backgroundColor: "#fff" 来引用来自 useTheme 钩子的 color.background。这可能吗？

我正在开发一个 RN 应用程序，用于react-native-paper处理主题和 UI。我有主题来格式化我的组件，但是当我尝试合并自定义字体时，它对组件没有任何影响react-native-paper。我已经关注了，[font guide][1]但它并没有改变这个问题。

我遵循如何使用加载字体的博览会示例loadFontAsync()，当我使用 style 属性将这些字体传递给我自己的组件时，fontFamily: 'Rubik-Regular字体会起作用，所以我知道这不是字体不存在的问题。

由于我是新手react-native-paper，我认为我的问题在于我的fontConfigor configureFonts()。任何帮助或指导将不胜感激。

import React from 'react';
import { Provider as ReduxProvider } from 'react-redux'
import configureStore from './store'
]import { configureFonts, DefaultTheme, Provider as PaperProvider } from 'react-native-paper'
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import AppNavigator from './components/AppNavigator'

const store = configureStore();

const fontConfig = {
    default: {
        regular: { …

我正在使用react native Expo
从库react-native-paper/checkbox-item 链接
中我获得了可点击标签功能，通过单击文本可以选中复选框。

我从这个 Expo Snack Link 获得了标签 Checkbox.Itemcode

<Checkbox.Item label="Item" status="checked" />

但是在这里，如何在复选框后面放置标签？

喜欢 [复选框] 标签

我是反应原生的新手。我正在使用 React Native Paper 为所有屏幕提供主题。我还使用反应导航堆栈导航器和抽屉导航器。首先，对于导航，纸张主题在导航组件中不起作用。但如果我不使用反应导航那么它就可以工作。

所以我尝试通过“withTheme”将主题从一个组件传递到另一个组件。但 withTheme 没有给我自定义主题道具。

这是我的 App.js

import { DefaultTheme,Provider as PaperProvider, Drawer, Avatar, withTheme } from 'react-native-paper';
import { createAppContainer,createSwitchNavigator } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer' 

const theme = {
  ...DefaultTheme,
  roundness: 8,
  colors: {
    ...DefaultTheme.colors,
    primary: '#ff0000',
    accent: '#000000',
    text: "#cc1111",
    background: "#000000",
    contained: '#000000'
  },
  dark: true
};

class App extends Component {

  render(){
      return(
        <PaperProvider theme={theme}>  
           <switchNavigator />
        </PaperProvider>
      )
  }
};

const switchNavigator = createSwitchNavigator({
  Login: Login,
  dranav: drawyerNavigator …

我通过他们的手册添加了材料设计论文库。

Gradle 打印了很多警告，如下所示：

> Task :app:stripDebugDebugSymbols
Execution optimizations have been disabled for task ':app:stripDebugDebugSymbols' to ensure correctness due to the following reasons:
  - Gradle detected a problem with the following location: '/app/android/app/build/intermediates/merged_native_libs/debug/out'. Reason: Task ':app:stripDebugDebugSymbols' uses this output of task ':app:copyDebugReactNativeVectorIconFonts' without declaring an explicit or implicit dependency. This can lead to incorrect results being produced, depending on what order the tasks are executed. Please refer to https://docs.gradle.org/7.2/userguide/validation_problems.html#implicit_dependency for more details about this problem.

如果通过 Android Studio 运行我的应用程序，它会启动，但图标看起来很奇怪（不像 …