标签: react-native

尽管我的进口很好，但我收到了这个错误。

不变违规：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查 的渲染方法Weather。

我的代码如下所示：
App.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Weather from './components/Weather';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Weather />
      </View>
    );
  }
}

天气.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Icon } from 'react-native-vector-icons/MaterialCommunityIcons';

export default Weather = () => (
  <View style={styles.weatherContainer}>
    <View style={styles.headerContainer}>
        <Icon size={48} name="weather-sunny" color={'#fff'} />
        <Text style={styles.tempText}> Temperature …

我正在使用 Expo - react-native 创建应用程序，但使用 KeyboardAvoidingView 和其他键盘包（react-native-keyboard-aware-scroll-view）在屏幕底部显示空白。我该如何解决？( https://i.stack.imgur.com/1c0M6.jpg ) 尝试过 KeyboardAvoidingView 和 react-native-keyboard-aware-scroll-view 但问题仍然存在

       import React, {Component} from 'react';
       import {StyleSheet,
       ScrollView,
       Text,ActivityIndicator,
       TouchableOpacity,
       TextInput,
        View,
        StatusBar,
       ImageBackground,
        KeyboardAvoidingView} from 'react-native';

       import { createStackNavigator, createAppContainer } from 'react- 
        navigation';
        import { KeyboardAwareView } from 'react-native-keyboard-aware- 
        view';
        import { AsyncStorage } from 'react-native';

        export default class LoginForm extends Component {
        render() {
         return (
           <KeyboardAwareView contentContainerStyle={{flex: 1}} animated={true}>
      <View style={styles.container}>
      <ScrollView style={{flex: 1}}>
    <StatusBar
      backgroundColor="transparent"
      barStyle="default"
      translucent={true}
    />
        <ImageBackground style={{width: "100%",height: …

我正在开发 React Native App。我正在使用 Axios 对 PHP Laravel 中的服务器进行 api 调用。如果我使用调试版本运行应用程序，一切都会按预期进行。我可以毫无问题地调用服务器。当我尝试发布 apk 时，Axios 总是给出“网络错误”的状态为 0。我已经确认我在服务器上也没有收到任何请求。但这仅发生在 Release apk 中。

我使用本地 ip 192.168.0.112，服务器在端口 80 上运行。我也尝试了不同的端口，但无济于事。问题是，如果我可以在调试 apk 中调用服务器，那么发布 apk 会立即给出“网络错误”有什么问题？

//这是我在用户第一次启动应用程序时进行的第一个调用 // 按下登录按钮，这是失败的地方，catch 中的代码运行。

Axios.post(server + "app/login", {
    email: user.userEmail.toLowerCase(),
    password: user.userPassword
    })
      .then(function(response) {
        //This part doesn't run in release but works fine in debug
        if (response.data.access_token.length) {
        //Do Stuff If Logged In
        }
    })
      .catch(function(error) {
      //This is always executed in release as soon as the request is made
      //i.e as …

我在 React Native 应用程序中使用 React Navigation 3.11，我想自定义堆栈导航中的后退按钮。在文档中它说：

标题背景图片

React 元素或组件以在标题的后退按钮中显示自定义图像。当一个组件被使用时，它在渲染时会收到一些 props (tintColor, title)。默认为带有 react-navigation/views/assets/back-icon.png 后退图像源的 Image 组件，这是平台的默认后退图标图像（iOS 上为 V 形，Android 上为箭头）。

这是我的配置：

let navigationRouteConfigMap : NavigationRouteConfigMap = {
      _main:
      {screen: page, navigationOptions: 
        { 
          [...]
          headerBackTitle: '',
          headerTruncatedBackTitle: '',
          headerBackImage: Images.backArrow,
        }
      }

    }
    let stackNavigatorConfig:StackNavigatorConfig = {
      headerBackTitleVisible: false
    }

    return createStackNavigator(navigationRouteConfigMap, stackNavigatorConfig)

我的配置中还有其他页面，所有页面都具有相同的共享导航选项和自定义标题背景图像。但是，在我的应用程序中，它呈现默认的后退箭头。（headerBackTitleVisible: false虽然有效）

我究竟做错了什么？

我想显示一个平面列表，但我有一个问题。在手机底部，我无法显示帖子的完整性，也不要滚动到它。我不知道为什么。有些问题？我尝试了一些有风格的间距东西，但这不像我想要的那样工作。

import React, { Component } from 'react'
import { View, Text, FlatList } from 'react-native'
import BlockPhoto from '../ui/BlockPhoto';
import { isTemplateElement } from '@babel/types';

interface Props { }

interface State { monTabPost: Array<TabPost> }

interface TabPost { id: number, title: string, }

const monTabPost: Array<TabPost> = [
{ id: 1, title: "Chat 1", },
{ id: 2, title: "Chat 2", },
{ id: 3, title: "Chat 3", },
{ id: 4, title: "Chat 4", },
{ id: 5, …

我正在编写我的 React Native 应用程序的测试套件，我想知道如何使用 Jest & Enzyme 测试 React Native 子组件的浅层渲染。

import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import React from 'react'

import NextButton from './NextButton'

describe('NextButton component', () => {
  describe('Rendering', () => {
    let onPress, text, wrapper

    beforeEach(() => {
      onPress = jest.fn()
      text = 'Test button'
      wrapper = shallow(<NextButton onPress={onPress}>{text}</NextButton>)
    })

    test('should render NextButton correctly', () => {
      expect(toJson(wrapper)).toMatchSnapshot()
    })

    test('should have text rendered as a child', () => {
      expect(toJson(wrapper.prop('children'))).toEqual(text)
    })
  })
}) …

在我的 React Native 项目中设置 Detox 时遇到了一些麻烦。我的项目配置如下：

MacOS 版本：10.14.14 Xcode 10.2.1 命令行工具：版本 10.2.1

包.json：

{
  "name": "AppName",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-preset-react-native-stage-0": "^1.0.1",
    "detox": "^12.11.0",
    "jest": "^23.6.0",
    "jest-react-native": "^18.0.0",
    "mocha": "^6.1.4",
    "react-test-renderer": "16.3.1"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "devtools": "react-devtools --port 8091",
    "test": "jest"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "jail-monkey": "^2.1.1",
    "react": "16.3.1",
    "react-devtools": "^3.2.3",
    "react-native": "~0.55.2",
    "react-native-camera": "1.1.4",
    "react-native-device-info": "^0.22.5",
    "react-native-fs": "^2.13.3",
    "react-native-image-resizer": "^1.0.0",
    "react-native-mail": "^3.0.7",
    "react-native-maps": "^0.21.0", …

我有一个 RN 代码，我想在 Android 上有 2 种口味。这些口味的不同之处在于：

1. ic_launcher & drawable
2. 字符串
3. 应用程序ID

我在 app/build.gradle 文件中添加了 product flavors，并为它们中的每一个添加了一个目录 res & AndroidManifest.xml。

我特别使用了这个库这部分。并成功完成了前 2 项。至于applicationId，每当我更改 productFlavors 部分中的 applicationId 字段时，它都会给我这个错误：

 `react native error: activity class {mainactivity} does not exist.`

我使用这些命令来运行应用程序：

  react-native run-android --variant flavortoneDebug

   react-native run-android --variant flavorttwoDebug

我试图更改每个风味的清单文件中的 package="" 字段，但它给了我这个错误：

       Manifest merger failed : Overlay manifest:package attribute declared at 
 AndroidManifest.xml:2:11-38 value=(com.examle.flavorone)
            has a different value=(com.examle.flavorone) declared in main manifest at AndroidManifest.xml:2:3-24
             Suggestion: remove the overlay declaration at …

我在 React Native 上使用Yup. 有两个字段（start_time和end_time），我想比较是否start_time在之后end_time并向用户抛出一条消息。

我阅读mixed.when并试图找出解决方案，但我被它阻止了。

const isSameOrAfterTime = (startTime, endTime) =>
  moment(startTime, HOUR_MINUTE_SECONDS_MASK).isSameOrAfter(endTime);

// example - data
// start_time: 08:00:25
// end_time: 10:23:42

start_time: Yup.string().when(['start_time', 'end_time'], {
    is: (startTime, endTime) => isSameOrAfterTime(startTime, endTime),
    then: Yup.string() // ???
    otherwise: // ????
  }),

当 start_time 在 end_time 之后时，我想抛出一条消息

我需要在我的无状态组件中测试一个函数作为下面的源代码：

function App(props) {
  const handleItemClick = () => {
    if (true) {
      props.doanything();
    }
  }

  return (
    <div onClick={handleItemClick}>
      App
    </div>
  );
}