标签: react-native-elements

我正在尝试在 React Native 中检索 FlatList 上单击元素的索引。正如文档所说，我将索引传递给 renderItem 道具。我的代码如下：

/**
 * Goes to the show view of a container
 * @param {*} index 
 */
showContainer = (index) => {
    console.log(index); 
}

render() {
    return (
        <DefaultScrollView style={styles.container}>
            <FlatList
                data={this.props.containers}
                renderItem={(data, index) => (
                    <ListItem
                        containerStyle={{borderBottomWidth: 1, borderBottomColor: "#000"}}
                        key={data.item.id}
                        leftAvatar={Image}
                        onPress={() => {this.showContainer(index)}}
                        rightIcon={{ name: "ios-eye", type: "ionicon" }}
                        subtitle={
                            `${data.item.dummy === true? 'Por favor configura tu dispositivo' : 'Contenido actual: '}`
                        }
                        subtitleStyle={(data.item.dummy == true)? [styles.configurationText, styles.subtitule] : styles.subtitule}
                        title={data.item.name} …

我正在尝试创建一个表单，它可以在 react-native-elements 的帮助下获取用户名和电子邮件地址，但它在渲染函数中出错（不变违规：元素类型无效：期望一个字符串（对于内置组件） ) 或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入）。

我试图将 FormLabel、FormIput 和 FormValidationMessage 放在渲染函数中的视图和容器中，但它给了我一个我无法弄清楚的错误。

import React from 'react';  
import { View, StyleSheet} from "react-native";  
import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements'  

export default class UserDetailsInput extends React.Component {  

    render() {
        return (
        <View>
            <FormLabel>Name</FormLabel>
            <FormInput/>
            <FormValidationMessage>Error message</FormValidationMessage>
        </View>
    );
}};

包.json

{  
    "main": "node_modules/expo/AppEntry.js",  
    "scripts": {  
        "start": "expo start",  
        "android": "expo start --android",  
        "ios": "expo start --ios",  
        "eject": "expo eject"  
    },  
    "dependencies": {  
        "expo": "^32.0.0",  
        "native-base": "^2.12.1",  
        "react": "16.5.0",  
        "react-dom": "^16.8.6",  
        "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz", …

fontFamily不适labelStyle用于Input来自的组件的属性react-native-elements。我错过了什么？

我正在使用 react 16.8.6、react-native 0.60.4 和 react-native-elements 1.1.0。我一直在我的整个应用程序上使用这个字体系列 (Arciform)，到目前为止它一直在工作。

样式表代码 - 文件定义库

export const definicoesBase = {
    tamanhoFonteTextoComum : 16,
    alturaLinhaTextoComum : 22,
    fontFamilyTextoComum : 'Arciform',
    corFonteTextoCabecalho : "#fff",
    tamanhoFonteTextoCabelho: 20,
    corFonteTextoComum : "#212121",
    corFonteTextoAvaliacao : "#e7a74e",
    fontWeightCabecalho:"bold",
    backgroundGeral : "#fff",
    backgroundAnuncio : "#FFF",
    corBordaAnuncio : "#bdbdbd",
    corBarraSlider : "#bdbdbd",
    corBotaoSlider : "#0288d1",
    backgroundCabecalho : "#0288d1",
};

样式表代码 - 文件 StyleFaleConosco

import { StyleSheet } from "react-native";

import StyleBase, { definicoesBase } from …

我使用react-native-element在我的应用程序中显示车辆列表。这是我的代码。

import React, { Component } from 'react'
import { Text, View, FlatList, StyleSheet, TextInput, KeyboardAvoidingView } from 'react-native'
import { Card, ListItem, Button, Icon } from 'react-native-elements'
import { fb, database } from '../../../config/config';

class Vehicles extends Component {
    constructor(props) {
        super(props);
        this.state = {
            v_number: "",
            v_brand: "",
            v_type: "",
            user: null,
            v_list: []
        };
    }

    componentDidMount() {
        this.getDataFromFBase();
    }

    getDataFromFBase() {
        fb.auth().onAuthStateChanged(function (user) {
            if (user) {
                this.setState({
                    user
                });
                database.collection('Users').doc(user.uid)
                    .collection('Vehicles').onSnapshot(snap => {
                        snap.docChanges().forEach(change => { …

我正在使用 React-Native 创建一个项目，目前当我尝试编译我的代码时，我收到一条错误消息 undefined is not an object (evaluating '_expo_.Asset.loadAsync')

我不完全确定是什么导致了这种情况，因为我在编译项目之前输入了很多代码。但是，从我收集的信息来看，这可能与我导入的字体有关？

目前这是我的代码用于导入字体的样子。

async componentDidMount() {
    await cacheFonts({
      georgia: require('../assets/fonts/Georgia.ttf'),
      regular: require('../assets/fonts/Montserrat-Regular.ttf'),
      light: require('../assets/fonts/Montserrat-Light.ttf'),
    });

    this.setState({ fontLoaded: true });
  }

当我尝试在我的代码中使用 'react-native-elements' 包时，我遇到了这个错误：

捆绑失败：错误：无法react-native-vector-icons/FontAwesome从node_modules\react-native-elements\src\social\SocialIcon.js以下位置解析模块：在项目中找不到 react-native-vector-icons/FontAwesome。

我已经做了很多事情来修复它。我再次安装了“react-native-vector-icons”，我使用了“rm ./node_modules/react-native/local-cli/core/fixtures/files/package.json”，但它们都不起作用。我该怎么做才能克服这个问题？我真的很感谢你们的帮助。

我在我的 React Native 项目中使用 React-native-elements。我需要在卡片标题右侧添加一个“+”号，如下所示，使用react-native-vector-icons. 我浏览了文档，但找不到任何相关内容。

<Card
   title="Resources"
   titleStyle={{
     textAlign: 'left',
   }}
>
   <Text style={{textAlign: "center"}}>No resources</Text>
</Card>

在 ListItem 的 React Native Elements 文档（https://react-native-training.github.io/react-native-elements/docs/listitem.html#linear-gradient-scale-feedback）中，ListItem 的按钮之间有填充它们是圆形的。

但是，当我尝试执行以下操作（直接来自文档）时，它不会产生相同的样式：

<ListItem
  Component={TouchableScale}
  friction={90} //
  tension={100} // These props are passed to the parent component (here TouchableScale)
  activeScale={0.95} //
  linearGradientProps={{
    colors: ['#FF9800', '#F44336'],
    start: [1, 0],
    end: [0.2, 0],
  }}
  ViewComponent={LinearGradient} // Only if no expo
  leftAvatar={{ rounded: true, source: { uri: avatar_url } }}
  title="Chris Jackson"
  titleStyle={{ color: 'white', fontWeight: 'bold' }}
  subtitleStyle={{ color: 'white' }}
  subtitle="Vice Chairman"
  chevronColor="white"
  chevron
/>

此外，我尝试添加垫和分隔道具，但这不会产生正确的外观。

如何设计单个 ListItem 组件的样式以匹配此样式？

我的应用程序是由react-native（0.62.2）开发的，并依赖于react-native-elements（2.0.0）。应用程序的屏幕必须包含两个 ScrollView 元素。第一个ScrollView将用于页面滚动，第二个ScrollView将用于现有单词卡。第一个 ScrollView 元素正在工作，但第二个 ScrollView 元素未在卡片元素中滚动。我尝试使用样式 {flex:1} 包装视图元素，但没有结果。

<ScrollView>
            // other items ...
            {
            wordSetObject.words.length == 0 ? null :
                <Card  title="Existing Words" dividerStyle={{marginBottom:0}} containerStyle={{maxHeight:300}}>
                    <ScrollView>
                            {
                            wordSetObject.words.map((item, index) => {
                                return(
                                <ListItem
                                    key={index}
                                    title={item.word} 
                                    subtitle={item.meaning}
                                    bottomDivider
                                    rightIcon={
                                        <View style={{flexDirection:'row'}}>
                                            <MCIcon
                                            name="pencil"
                                            size={22}
                                            />
                                            <MCIcon
                                            name="delete"
                                            size={22}
                                            color="red"
                                            onPress={() => onPressDeleteWordButton(index)}
                                        />
                                        </View>
                                    }
                                    />)
                                 })    
                            }
                    </ScrollView>
                </Card>
            }
        </ScrollView>