小编Tho*_*mar的帖子

SO community,

I can't figure out the correct type definition for an RN FlatList styled with Styled Components in Typescript

So I have type IProduct like that

interface IProduct {
  id: string;
  name: string;
}

and I define the types for the FlatList like that

<FlatList
  data={products}
  renderItem={({ item }: { item: IProduct }) => (
    <SomeComponent item={item} />
  )}
  keyExtractor={(item: IProduct) => item.id}
/>

everything works fine. Typescript does not complain but as soon as I want to style …

我有一个关于模态堆栈内的卡片堆栈的问题，如附图所示。

所以，只是重复我想做的事情。我有一个打开绿色模式的screen选项。presentation: 'modal'

在那个绿色模式中，我有一个按钮应该调用一个导航调用，该调用应该显示screen带有选项的蓝色presentation: 'card'以及返回到绿屏的能力。

我已经用WIX的 React-native-navigation 库做了类似的事情，但我不知道是否可以用 React-navigation 来完成。

任何帮助深表感谢。

干杯

我正在尝试实现react-native-linear-gradient,但是一旦我将库导入到react-native组件中,我就会收到以下错误:

import LinearGradient from 'react-native-linear-gradient'

我可以在XCode中成功编译项目,并且渐变显示在物理iPhone上,但它不在模拟器中.

有没有人以前处理过这个问题？

同样,问题是react-native(iOS模拟器)无法找到库,但是在Xcode中有BVLinearGradient库,项目编译成功.

谢谢

假设<Text></Text>连续有10个组件.这些组件将通过循环遍历数组来创建,如下所示:

...
const fontsize = 16
return (
  <View style={{flex: 1}}>
    {
      array.map((val, index, arr) => {
        return (
          <Text ref={'text' + index} style={{fontSize: fontsize}]}>{val}</Text>
        )
      })
    }
  </View>
)
...

现在我想改变的fontSize的<Text>与组件裁判的'text5'

我知道我可以获取/设置此组件的样式,this.refs.text5.props.style.fontSize但我如何更新虚拟DOM？

我在React Native应用程序中使用Redux Form(RF).一切正常但我无法弄清楚如何refs从Field输入到Redux Form转到下一个输入字段.

没有RF,这个解决方案就可以正常工作.

这是我的代码:

class RenderInput extends Component {
   const { input, nextField, refs,
        meta: { touched, error, warning },
        input: { onChange } } = this.props
   render() {
      return (
         <Input
            returnKeyType = {'next'}
            onChangeText={onChange}
            onBlur={input.onBlur}
            onFocus={input.onFocus}
            onSubmitEditing = {(event) => {
               // refs is undefined
               refs[nextField].focus()
            }}/>
      )
   }
}

class Form extends Component {
   render() {
      return (
         <Field
            name="field1"
            focus
            withRef
            ref='field1'
            nextField = "field2"
            component={RenderInput}/> …

我一直在尝试nodejs-mobile-react-native在 Android 上工作，但当我尝试构建项目时出现以下错误：

> Task :nodejs-mobile-react-native:mergeDebugNativeLibs FAILED

Execution failed for task ':nodejs-mobile-react-native:mergeDebugNativeLibs'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.MergeNativeLibsTask$MergeNativeLibsTaskWorkAction
   > 2 files found with path 'lib/arm64-v8a/libnode.so' from inputs:
      - /Users/<me>/projects/react-native/<my project>/node_modules/nodejs-mobile-react-native/android/build/intermediates/merged_jni_libs/debug/out/arm64-v8a/libnode.so
      - /Users/<me>/Projects/react-native/<my project>/node_modules/nodejs-mobile-react-native/android/build/intermediates/cxx/Debug/4a1j5e35/obj/arm64-v8a/libnode.so
     If you are using jniLibs and CMake IMPORTED targets, see
     https://developer.android.com/r/tools/jniLibs-vs-imported-targets

我对该项目有这样的设置：

"react": "^17.0.2",
"react-native": "^0.66.3",
"nodejs-mobile-react-native": "^0.6.3",

Gradle version 7.0.2
Java version 11
NDK version 21.4.7075529
CMake version 3.18.1
Android SDK Platform 31 (12)

我在我的系统中尝试了这些设置（或没有），app/build.gradle但它不起作用

packagingOptions {
  pickFirst 'lib/armeabi-v7a/libnode.so'
  pickFirst 'lib/arm64-v8a/libnode.so' …

我有以下数据集：

{
  "_id" : ObjectId("57684f2b61f2af6d49fa6dbd"),
  "firstname" : "First1",
  "surname" : "Sur1",
  "email" : "first1@sur1.com",
  "goals" : [ 
    {
        "gId" : "base1",
        "recordDate" : ISODate("2016-06-21T20:05:48.972Z")
    }, 
    {
        "gId" : "base2",
        "recordDate" : ISODate("2016-06-21T20:05:48.972Z")

    }, 
    {
        "gId" : "base1",
        "recordDate" : ISODate("2016-06-21T20:05:48.972Z")

    }
 ]
}

我需要以下结果：

{
  "_id" : ObjectId("57684f2b61f2af6d49fa6dbd"),
  "firstname" : "First1",
  "surname" : "Sur1",
  "email" : "first1@sur1.com",
  "goals" : [
    {
       "gId" : "base1",
       "count" : 2
    },
    {
       "gId" : "base2",
       "count" : 1
    }
  ]
}

到目前为止，我使用了聚合查询，但找不到解决问题的方法。我的查询看起来像那样，但它不起作用。第一个位$project …

我需要NextJS webpack 配置方面的帮助吗？

我有一个 mono-repo 并在React-Native和NextJS之间共享代码。为了拆分特定于操作系统的代码，我将本机代码和 Web 代码分开，如下所示：( Login.web.tsx& Login.native.tsx)

例子：/Login/index.tsx

import React, { lazy, ReactElement, Suspense } from 'react'
import { Platform, View } from 'react-native'

const LoginComponent = lazy(() => (Platform.OS === 'web' ? import('./Login.web') : import('./Login.native')))

const Login = (props: NavigationProp): ReactElement => {
  return (
    <Suspense fallback={<View />}>
      <LoginComponent {...props} />
    </Suspense>
  )
}

export default Login

此示例代码位于ui-screens项目中，并将被导入到唯一的 NextJS 页面中

import { Login } from '@monorepo/ui-screens' …

context的函数apollo-server-express在一段时间内不断执行正常吗？

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: ({ event, context, express }) => {
    console.log('context')
  }
})

我可以每隔 2 秒左右在控制台中看到一个新的日志输出。

干杯

下面是redux-form的代码.一切都与redux商店完美配合,但我无法在span元素中显示错误消息.

import React from 'react'
import { Button } from 'react-bootstrap'
import { Field, reduxForm } from 'redux-form'

const validate = (values) => {
    const errors = {}
    if (!values.firstname) {
        errors.firstname = 'Required'
    }
    return errors
}

const renderInput = (field) => (
    <div>
        <label>{field.placeholder}</label>
        <div>
            <input {...field.input}/>
            {field.error && <span>{field.error}</span>}
        </div>
    </div>
)

@reduxForm({
    form: 'addUserForm',
    validate
})

export default class CreateUserForm extends React.Component {
    render() {
        const {addUser, handleSubmit} = this.props
        return (
            <form onSubmit={handleSubmit(addUser)}>
                <Field type="text" …