标签: react-native-paper

我正在使用带有样式组件的 React Native Web 和 React Native Paper 库。基本上我想自定义 TextInput 内部组件：标签和html 输入

问题是：

1）如何更改标签样式？例如。宽度\尺寸\颜色等？
2）如何更改html输入样式？

我想设置outline: none为防止在浏览器中焦点上显示蓝色边框。据我所知，在本机的情况下，我们没有，html并且本机网络会对其进行转译。

我不明白如何捕获嵌套标签组件来更改其样式。因为我想在未填充时显示灰色标签，在填充时显示紫色，并且输入文本应为黑色。对于网络来说，这是微不足道的，但对于本机来说，我不知道如何处理它。

那么这有可能吗？

谢谢你的帮助。这是代码示例

import React from 'react';

import {
  View,
  Platform,
} from 'react-native';

import {
  TextInput as NativePaperInput,
  withTheme,
} from 'react-native-paper';

import styled from 'styled-components/native';

const NativePaperInputThemed = withTheme(NativePaperInput);

export const TextInputStyled = styled(NativePaperInputThemed)`
    ${(props: any) => {
      return `
        outline: none;  // doesn't work
        input: { …

我正在使用react-native-paper，我想获得一个图标组件，但没有与按钮组件的任何链接。我浏览了文档，但没有找到图标组件。我想要类似于react-native-elements的东西

import { Icon } from 'react-native-elements'


<Icon
  name='g-translate'
  color='#00aced' />

所以请帮助我实现这一目标。

我正在尝试使用 formik 表单上传图像，如果不是，如何将 formik 表单值转换为 formData？

我将<WebView>其嵌入到<Card.Content>我正在使用的a 中react-native-paper。我正在尝试可WebView滚动。网页视图显示但不可滚动。

我正在使用的代码：

  <Card theme={{ roundness: 20 }} style={{ margin: 10, height: height*0.8 }} elevation={14}>
     <Card.Content style={{ flex: 1 }}>
        <View style={{ justifyContent: "center", alignItems: "center" }}>
              <WebView
              style={{ width: width * 0.8, height: height * 0.9 }}
              allowsBackForwardNavigationGestures={false}
              source={{ uri: "https://paypal.com"}}
              pullToRefreshEnabled={false}
              javaScriptEnabled
              startInLoadingState
              decelerationRate="normal"
              scalesPageToFit={Platform.OS == "android"?  false : true}
              originWhitelist={['*']}
              domStorageEnabled={true}
              scrollEnabled
              renderError={e => { console.log(e); }}
              />
        </View>
     </Card.Content>
  </Card>

我怎样才能使WebView滚动？

下面的代码使用DataTable.Cell.

如果文本大于列宽，则会隐藏文本

如果大于列宽的文本需要在下一行中中断文本，请帮助需要显示文本。

<DataTable.Row
  style={{ flex: 1, flexWrap: 'wrap', paddingLeft: 1, borderColor: 'green', borderWidth: 2 }}>
  <DataTable.Cell
    style={{
      flex: 3,
      flexWrap: 'wrap',
      borderColor: 'yellow',
      borderWidth: 2,
      height: auto,
      overflow: 'visible',
    }}>
    <View style={styles.rowbox}>
      <Text style={styles.stnname}>Test 1</Text>
      <Text>Day:1</Text>
      <Text>Distance:0</Text>
    </View>
  </DataTable.Cell>
  <DataTable.Cell numeric>Cell 1 2</DataTable.Cell>
  <DataTable.Cell numeric>Cell 1 3</DataTable.Cell>
</DataTable.Row>
<DataTable.Row
  style={{ flex: 1, flexWrap: 'wrap', paddingLeft: 1, borderColor: 'green', borderWidth: 2 }}>
  <DataTable.Cell
    style={{
      flex: 3,
      flexWrap: 'wrap',
      borderColor: 'yellow',
      borderWidth: 2,
      height: auto,
      overflow: 'visible',
    }}>
    <View …

React Native 论文中 Modal 上 TextInput 的一些奇怪行为。当我输入一个字符时，它被输入到文本框中，但随后光标闪回（就像被删除一样），然后又重新出现。这一切发生得非常快，并且保留了角色，但这一切看起来有点卡顿。下面的GIF来说明：

对于模式来说，代码相当简单：

import { Portal, Modal, Button, Title, Text, TextInput } from 'react-native-paper'; 

const [nameNew, setNameNew] = useState('')
const [emailNew, setEmailNew] = useState('')

const renderModalAddPerson = () => {
    return (
      <Portal>
        <Modal visible={visibleModalAddPerson} onDismiss={closeModalAddPerson} contentContainerStyle={styles.modalContainer}>
          <View>
            <Title style={{alignSelf:'center'}}>Title here</Title>
            <Text>  </Text>
            <TextInput
              mode="outlined"
              label="Name"
              style={{alignSelf:'center', width:'95%'}}
              value={nameNew}
              onChangeText={nameNew => setNameNew(nameNew)}
              ref={input1}
              returnKeyType='next'
              blurOnSubmit={false}
              onSubmitEditing={() => input2.current.focus()}
            />
            <TextInput
              mode="outlined"
              label="Email"
              style={{alignSelf:'center', width:'95%'}}
              value={emailNew}
              onChangeText={emailNew => setEmailNew(emailNew)}
              ref={input2}
              returnKeyType='done'
              blurOnSubmit={false}
              onSubmitEditing={() => addPerson()}
            /> …

我正在使用Expo和react-native-paper。在react-native-paper文档中它说：“如果你使用Expo，则不需要安装矢量图标”

这些图标适用于 Expo 的网络版本，但不适用于 Android（模拟器或通过应用程序）。

在 Android 上，我收到此错误：无法从“node_modules\react-native-paper\src\components\MaterialCommunityIcon.tsx”解析“react-native-vector-icons/MaterialCommunityIcons”

尝试了下面的解决方案（尽管我认为在使用 Expo 时不应该使用这些解决方案）

• 如果我安装react-native-vector-icons包，我收到错误：fontFamily“MaterialCommunityIcons”不是系统字体并且尚未通过Font.loadAsync加载

• 在这里尝试解决方案：运行react-native link react-native-vector-icons似乎没有帮助。使用 Expo 时无法访问 Android Gradle。

封装版本：

    "@expo/vector-icons": "^12.0.0",
    "expo": "~40.0.0",
    "expo-file-system": "~9.3.0",
    "expo-font": "~8.4.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-hook-form": "^6.13.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
    "react-native-paper": "^4.4.1",

我正在为我的应用程序使用Button组件react-native-paper。我按背景设置为某个值。如何更改触摸时出现的波纹颜色。

我的按钮组件

<Button
    mode="contained"
    style={styles.button}
    labelStyle={styles.buttonLabel}
    uppercase={false}
    onPress={() => {}}
>
    Click Here
  </Button>

使用的样式

button: {
  marginTop: 30,
  backgroundColor: Colors.BRIGHT_YELLOW,
  padding: 5,
  borderRadius: 10
},
buttonLabel: {
  fontFamily: FONT_FAMILY.POPPINS_MEDIUM,
  fontSize: FONT_SIZE[18],
  color: Colors.PURE_WHITE
}

我正在使用React Native Paper 中的SnackBar，它显示在我的应用程序底部：

但我想在屏幕顶部显示这个小吃栏。我尝试使用样式组件来做到这一点：

export const ConfirmSnack = styled(Snackbar)`
  top: 0;
`;

但这并不能解决问题，即使添加时position: absolute;我已经阅读了文档但找不到任何有关定位小吃栏的内容。如何在屏幕顶部显示此信息栏？

我使用react-native-paper searchbar组件来实现搜索组件。以下是我开发的基本代码。但是，当我在搜索输入字段外部单击时，键盘不会折叠，并且 onFocus 不会从输入中删除。

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

const SearchBar = () => {
  const [searchQuery, setSearchQuery] = React.useState('');

  const onChangeSearch = query => setSearchQuery(query);
  cons onClick = () => { console.log(`searching for ${query}`);};

  return (
    <Searchbar
      placeholder="Search"
      onChangeText={onChangeSearch}
      value={searchQuery}
      onIconPress={onClick}
    />
  );
};

export default SearchBar;

有人可以让我知道当用户在搜索输入之外单击时如何隐藏键盘吗？谢谢。