标签: react-native-paper

我正在寻找带有浮动建议框的自动完成文本输入。

请建议我任何可以帮助制作相同组件的包名称。

我尝试了许多软件包但没有任何帮助，有些正在推动下一个字段，有些则不支持单击离开侦听器。

如何在 React Native Paper 中更改 TextInput 的文本颜色而不用在 PaperProvider 中换行？

目前这有效：

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    text: "orange",
  }
};

<PaperProvider theme={theme}>
  <TargetComponent />
</PaperProvider>

但是我想通过从父组件传递的道具来控制文本颜色。奇怪的是，传球backgroundColor有效但color无效。

去除PaperProvider包装也无济于事。

这是 TargetComponent 中的相关代码：

return (
    <View style={styles.container}>
      <TextInput
        type="outlined"
        style={this.props.style}
        onChangeText={this.props.onChange}
        label={this.props.label}
        value={this.props.value || "Replace this text"}
        placeholder={this.props.placeholder}
      />
    </View>
)

this.props.style 是：

{
    color: "orange", // This does not work
    backgroundColor: "transparent" // This works
},

我对 React Native 比较陌生。

我可以轻松地显示按钮（带有阴影等），如下所示。

 <Button
  mode="contained"
  color={'#f08e25'}
  contentStyle={{ height: 44 }}
  onPress={this.onPressSubmit}
  theme={theme} >SUBMIT </Button>

我也参考了这个文档。

https://callstack.github.io/react-native-paper/button.html#contentStyle

问题是如果模式是“包含”，我无法更改文本颜色。我在 contentStyle 或 theme 中尝试过，但它不起作用。如果模式是“包含”，我该如何更改文本颜色？

问题出在 React-native-papers 和 TextInput 组件上。（也许是我缺乏 css/flexbox 知识）

当在树中 TextInput 上方的视图上使用alignItems: 'center' 时，TextInput 的渲染会不稳定。它占据了屏幕的整个高度，并且宽度非常窄。必须在具有alignItems: 'center' 的视图和TextInput 之间或在TextInput 本身的组件层次结构中指定css 宽度属性。

有一个 Github 问题已关闭。 https://github.com/callstack/react-native-paper/issues/2335

  return (
    <View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
      <TextInput label='Email' value='' /> 
      <TextInput label='Password' value='' />
    </View>
  );
}

可以使用此 Snack 重现问题。仅在设备上，在网络上看起来不错。 https://snack.expo.dev/@parriz/paper---weird-textinput-behaviour

完全相同的代码设置。但具有核心 React Native 组件。（按预期工作） https://snack.expo.dev/@parriz/default-react-native

完全相同的代码设置。但具有核心 React-native-element 组件。（按预期工作） https://snack.expo.dev/@parriz/great-donuts

我的问题：

• Flexbox 内的组件不应该根据需要增长以适应内容吗？（因此，这种行为是一个错误？）
• 如果有人以前使用过 Native Paper，你是如何处理这个问题的？您刚刚是否明确设置了所有 TextInput 的宽度？这是你平时的做法吗？
• 为什么网络上和设备上的结果如此不同？我认为结果在 React Native 和 React Native Web 上应该是相同的？

这是一个React Native使用React Native Paper. 我跟在指令https://callstack.github.io/react-native-paper/getting-started.html并安装react-native-paper和react-native-vector-icons。

出于某种原因，应用程序中没有显示任何图标——见下文：

例如，我Searchbar在这个屏幕的顶部有一个带有以下代码的。据我所知，我什至不必在那里指定一个图标。它应该自动显示一个放大镜，但没有显示图标。

<Searchbar placeholder="New to do item..." />

知道为什么以及如何解决它吗？

我想改变react-native-paper导航的颜色。我怎样才能改变颜色。我可以更改背景颜色，但无法更改活动选项卡圆形按钮的颜色。

图片链接 = https://i.stack.imgur.com/3Edpm.png

我想把粉红色变成蓝色我该如何改变。

import * as React from 'react';
import { BottomNavigation} from 'react-native-paper';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


const Tab = createBottomTabNavigator();


const HomePage =({route,navigation})  => {
    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState([
        { key: 'home', title: 'Home', focusedIcon: 'home', unfocusedIcon : 'home-outline',  },
        { key: 'orderHistory', title: 'Order History', focusedIcon: 'clock', unfocusedIcon: 'clock-outline' },
        { key: 'profile', title: 'Profile', focusedIcon: 'account', unfocusedIcon : 'account-outline'},
        { key: 'other', title: 'Other', focusedIcon: 'dots-horizontal-circle', unfocusedIcon: …

我想在焦点之前更改此代码中的颜色或边框，我想要红色，在焦点上我想要黄色。

这是我的作品 https://prnt.sc/o8evi5

这是我拥有的代码，我正在使用 React Native Paper https://callstack.github.io/react-native-paper/text-input.html

                <TextInput
                  label='Email or username'
                  mode='outlined'
                  theme={{ colors: { underlineColor:'red',}}}
                  style={(this.state.isFocused) ? {borderColor: 'black', borderColor: 'black',} : {fontStyle: 'italic', color: 'white'}} 
                  selectionColor='red'
                  underlineColor='red'
                  placeholder='name@example.com'
                  keyboardType='email-address'
                  underlineColorAndroid='transparent'
                  autoCorrect='false'
                  autoCapitalize='none'
                  onChangeText={formikProps.handleChange('email')}
                  onBlur={formikProps.handleBlur('email')}
                  //autoFocus
                />

我试过了，但它没有给我我想要的 https://github.com/callstack/react-native-paper/issues/656

我需要使用自定义图标和文本自定义 FAB.Group。

如果我设置宽度和高度，图像就会隐藏，同时它也会增加文本的大小。我怎样才能将这个图像设置为与react-native-paper中一样大和文本。

react-native-paper文档建议您可以使用主题设置禁用按钮的颜色，但此代码不起作用：

export const buttonTheme = {
  colors: {
    primary: COL_BASE_YELLOW,
    disabled: COL_DARK_HIGHLIGHT,
  },
}

<Button
  loading={submittedPhoneNumber ? true : false}
  mode="contained"
  onPress={() => handleSubmitPhoneNumber(phoneNumber)}
  theme={buttonTheme}
  disabled={phoneNumber.length < 5 ? true : false}>
  Continue
</Button>

然而，颜色primary有效。当按钮被禁用时如何更改按钮的颜色？

我的最终目标是根据其他地方设置的几个状态为一些抽屉项目提供自定义背景颜色。我知道为了给抽屉项目提供独特的背景颜色，我需要设置自定义抽屉内容。但是，我遇到了一个问题，我无法让自定义抽屉图标知道它们是否处于焦点。

我最初认为我可以做一个const [bHomeFocused, setbHomeFocused] = useState(false)（等）并设置状态onPress然后设置focused属性，但是当更多的抽屉物品进来时，我认为这听起来像是一个笨拙的解决方案。

我确定我缺少一个简单的答案，因为非自定义 DrawerItems 固有地具有此功能......

import { Drawer } from 'react-native-paper'
import { createDrawerNavigator, DrawerNavigationProp, DrawerItem, DrawerContentScrollView, DrawerItemList, DrawerContentComponentProps, DrawerContentOptions } from '@react-navigation/drawer';

function CustomDrawerContent(props: DrawerContentComponentProps<DrawerContentOptions>) {

    return (
        <DrawerContentScrollView {...props}>
            <Drawer.Section>
                <DrawerItem
                    label="Dashboard"
                    labelStyle={{ color: colorTheme.normalText }}
                    icon={() => <Icon name="book" type="feather" size={26} color={colorTheme.normalText} />}
                    activeBackgroundColor={colorTheme.panel}
                    inactiveBackgroundColor={colorTheme.cyan}
                    onPress={() => {
                        props.navigation.navigate('Dashboard')
                    }}
                />
            </Drawer.Section>
            <DrawerItem
                label="Home"
                labelStyle={{ color: colorTheme.normalText }}
                icon={() => <Icon name="home" type="feather" size={26} color={colorTheme.normalText} />}
                activeBackgroundColor={colorTheme.panel} …