标签: react-native-elements

我有（我认为是）一个简单的FlatList呈现Cards（下面的代码）的列表

问题：列表呈现，但不会滚动以完全显示列表中的最后一个元素，或滚动到列表下方的内容FlatList

我试过的：基本上所有相关的SO问题：

• 删除所有样式
• 包裹FlatList在 aView或 aScrollView或两者中
• 添加style={{flex: 1}}到FlatListor 包装器（这会导致 **ALL* 内容消失）

有任何想法吗？

<FlatList
        data={props.filteredProducts}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => props.addItemToCart(item)}>
            <Card
              featuredTitle={item.key}
              image={require('../assets/icon.png')}
            />
          </TouchableOpacity>
        )}
        keyExtractor={item => item.key}
        ListHeaderComponent={
          <SearchBar />
        }
      />
...
<Other Stuff>

我是 React-Native 的新手，我已将 react-native-vector-icons 库手动添加到 Xcode 和 Android Studio。如果使用 Xcode 运行代码，它会成功执行而没有任何问题。但是如果我尝试从终端（react-native run-ios）运行代码，它会在模拟器中显示“无法识别的字体系列材料”。但是如果我运行命令（react-native run-android），这个工作也是一样的。

请帮我。这是终端错误屏幕截图中显示的错误

** BUILD FAILED **


The following build commands failed:

    CompileC /Users/user/Documents/Test/JobsNProfiles/ios/build/Build/Intermediates.noindex/RNVectorIcons.build/Debug-iphonesimulator/RNVectorIcons.build/Objects-normal/x86_64/RCTFont+FA5.o /Users/user/Documents/Test/JobsNProfiles/node_modules/react-native-vector-icons/RNVectorIconsManager/RCTFont+FA5.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

我有一个项目，主要是编写 Native Base 组件。但在某些情况下，我想使用 React Native Elements。我只是想知道是否可以单独使用它们。

对于某些组件，我将只使用 React Native Elements，例如 Avatar 组件。不是将它们一起导入，我的意思是只有一个 UI 工具包。

使用create-react-app启动了一个项目。已安装的react-native：“ ^ 0.57.8”，react-native-elements：“ ^ 0.19.1”和react-native-vector-icons：“ ^ 6.1.0”。为了能够在项目中的本机元素中使用组件。

运行时，npm start我得到下面粘贴的错误代码。我已经阅读了react-native-elements文档，但似乎找不到任何可以帮助我的东西

./node_modules/react-native-elements/src/avatar/Avatar.js
 SyntaxError: D:\Location-Map\Neighborhood-Map-2-\location- 
 app\node_modules\react-native-elements\src\avatar\Avatar.js: Unexpected 
 token (92:8)

  90 | 
  91 |       return (
> 92 |         <TouchableHighlight
     |         ^
  93 |           style={[
  94 |             styles.editButton,
  95 |             editButtonSizeStyle,

我正在使用 React Native（版本 0.59.10）构建一个项目。每当我运行测试（使用 Jest）时，我都会收到以下警告：

    console.warn node_modules/react-native/Libraries/Animated/src/NativeAnimatedHelper.js:248
      Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`. More info: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420

这似乎是由于使用了Animatedin TouchableOpacitywhich 又被Buttonfrom 'react-native-elements' 使用。

使用 Xcode 查看我的项目，我可以看到该RCNativeAnimation项目在那里：

我检查了引用的链接：https : //github.com/facebook/react-native/issues/11094#issuecomment-263240420但这已经很老了，指的是 React Native 和 Xcode 的非常旧版本。

我猜这个警告只是与RCNativeAnimation无法从测试中访问的本机模块有关，但我不知道如何useNativeDriver在测试上下文中“删除”。显然，在真实的应用程序中，我想确保我使用的是原生动画库，但在单元测试中我不在乎。

消除此警告的推荐方法是什么？

我正在尝试将react-native-elements 与我的React-Native 应用程序一起使用。

我有一个包含主题详细信息的中央 js 文件，这些文件是使用 ThemeProvider 注入的，如此处所述 - https://react-native-elements.github.io/react-native-elements/docs/customization.html

但是，当我尝试在组件的 stylesheet.create 方法中使用传递的主题时，出现错误。我究竟做错了什么？-

import React from \'react\';\nimport {View, StyleSheet} from \'react-native\';\nimport {Text, withTheme} from \'react-native-elements\';\n\nconst Header = props => {\n  const {theme} = props;\n\n  return (\n    <View style={styles.container}>\n      <Text>Home</Text>\n    </View>\n  );\n};\nconst styles = StyleSheet.create({\n  container: {\n    width: \'100%\',\n    backgroundColor: theme.container.backgroundColor,//**** Getting error here stating that theme is not defined\n    shadowRadius: 1.5,\n    elevation: 2,\n    shadowColor: \'rgb(0,0,0)\',\n    shadowOpacity: 0.4,\n    shadowOffset: {width: 0, height: 2.5},\n  },\n});\n\nexport default withTheme(Header);\n

如果我可以提供更多详细信息，请告诉我。 …

React Native Elements Tooltip（此处的文档）要求您传入工具提示的width和height属性，但我想创建一个通用的工具提示按钮，可以接收任何元素作为其popoverprop。

以下示例是我所拥有的，但它使用 React Native Element 库为工具提示设置的默认大小：

import React from 'react'
import { Tooltip } from 'react-native-elements'
import styled from 'styled-components'

const Container = styled.View`
  justify-content: center;
  align-items: center;
  background-color: #aaf;
  height: 25px;
  width: 25px;
  border-radius: 12.5px;
`

const Icon = styled.Text``

export default function TooltipButton({ tooltip }) {
  return (
    <Tooltip popover={tooltip}>
      <Container>
        <Icon>?</Icon>
      </Container>
    </Tooltip>
  )
}

当内容大于默认大小时，它看起来像这样。

我不想将固定大小作为支柱传递给该组件，我希望它有一个取决于其内容的工具提示大小。

我正在为抽屉项目和 headerLeft 设置图标。但是图标没有出现在我的 Android 应用程序中。我正在使用react-native-elements库在我的代码中使用图标。图标类型字体很棒。我已经具体提到了图标的类型。

我已经尝试了所有命令，例如react-native link，并成功链接了所有库，但没有任何效果。

主要组件.js

import React, { Component } from 'react';
import Menu from './MenuComponent';
import { View,Platform } from 'react-native';
import Dishdetail  from './DishdetailComponent';
import Home from './HomeComponent';
import { createStackNavigator,createAppContainer} from 'react-navigation'; 
import {createDrawerNavigator} from 'react-navigation'; 
import { Icon } from 'react-native-elements'
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import Contact from './ContactusComponent';
import About from './AboutusComponent';


 const MenuNavigator = createStackNavigator({
 Menu: { 
 screen: Menu,
 navigationOptions: ({ navigation }) …

React Native 滑块 onValueChange 调用 setState 会使滑块滞后。

我也尝试过 debounce 功能，但它不能解决我的问题，因为我必须在屏幕上显示更改值。因此，如果不使用 lodash 的 debounce，滑块会滞后，当使用 debounce 滑块移动时比以前的方法更平滑，但值的变化（我必须在屏幕上显示的状态值）不会立即改变，值的变化反映在屏幕上滞后意味着在屏幕上显示需要时间。

import React from "react";
import Slider from "react-native-slider";
import { StyleSheet, View, Text } from "react-native";

export default class SliderExample extends React.Component {

  state = {
    value: 0.2
  };

  render() {
    return (
      <View style={styles.container}>
        <Slider
          value={this.state.value}
          onValueChange={value => {
              this.setState({ value })
                // this.props.changeState(this.state.value)
                console.log(this.state.value)
            }}
          maximumValue={100}
          step={1}
        />
        <Text>
          Value: {this.state.value}
        </Text>
      </View>
    );
  }
}

还有一件事是，当我只实现上面的滑块时，没有问题，但是当我在有许多状态的完整代码中使用它时，它会产生问题。

你能帮我解决反应原生元素库上按钮边框半径的问题吗？

我向按钮添加了边框半径，但其不透明度仍然是矩形，我不明白为什么。

https://github.com/react-native-elements/react-native-elements/issues/2324