小编Yos*_*ssi的帖子

我对 Animated.event 有问题，在滚动事件上进行插值。当我使用 Animated.event 时

useNativeDriver: true

我收到下一个错误：

Style property 'height' is not supported by native animated module

如果我使用opacity财产 - 它工作正常。

我的代码：

render() {
        this.yOffset = new Animated.Value(0);

        let event = Animated.event([
            {
                nativeEvent: {
                    contentOffset: {
                        y: this.yOffset
                    }
                }
            }
        ], {useNativeDriver: true});

        let opacity = this.yOffset.interpolate({
            inputRange: [0, 120],
            outputRange: [1, 0],
        });

        let height = this.yOffset.interpolate({
            inputRange: [0, 180],
            outputRange: [200, 100],
        });

        return (
            <View>
                <Header
                    style={{
                        opacity,
                        height
                    }}
                />


                <ScrollView
                    style={[ …

我一直在寻找如何结合以下内容:ReactJS + ReactStrap和CSS-Modules(react-css-modules和/或boostrap-css-modules),但是,我似乎无法将这三个模块拼凑在一起来实现期望的效果(或在线找到任何帮助).

这背后的想法是让ReactStrap元素可用,即:

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

但也允许我使用CSS模块,最终结果类似于:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './mybutton.css';

class Test extends React.Component {
    render () {
        return <Button color='danger' styleName='myButton'>Danger</div>;
    }
}

export default CSSModules(Table, styles);

mybutton.css可能是这样的:

.myButton {
  composes: btnPrimary from "bootstrap-css-modules/css/buttons.css";
  background-color: dodgerblue;
  border-color: dodgerblue;
}

我也在使用Webpack,所以我甚至不知道从哪里开始使用Webpack.

编辑:

我使用它的方式如下:

npm install --save bootstrap@4.0.0-alpha.6

npm install --save reactstrap react-addons-transition-group …

我在运行 react-native 应用程序时收到“React.createContext 不是函数”错误。我在代码中搜索了“createContent”，它不存在。

任何想法可能是错误的原因。

它是已在 android 上运行的应用程序的 iOS 版本。

这是我的 package.json 文件：

{
  "name": "newapp",
  "version": "0.0.2",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest --verbose --coverage",
    "test:update": "jest --verbose --coverage --updateSnapshot",
    "test:watch": "jest --verbose --watch",
    "coverage": "jest --verbose --coverage && xdg-open ./coverage/lcov-report/index.html",
    "lint": "npx eslint --fix ./src/*"
  },
  "dependencies": {
    "apollo-boost": "0.1.17",
    "axios": "^0.18.0",
    "babel": "^6.23.0",
    "buffer": "5.1.0",
    "cross-fetch": "^3.0.0",
    "enzyme": "^3.3.0",
    "graphql": "0.13.2",
    "graphql-tag": "2.10.0",
    "jasmine-react-helpers": "^0.2.2",
    "lodash": "4.17.5",
    "moment": "2.21.0",
    "query-string": "^6.1.0",
    "react": "16.2.0", …

奇怪的行为：我希望第一个和第二个 console.log 显示不同的结果，但它们显示相同的结果，并且仅在下次单击时更改值。我应该如何编辑我的代码以使值不同？

function App() {
  const [count, setCount] = React.useState(false);
  const test = () => {
    console.log(count); //false
    setCount(!count);
    console.log(count); //false
  };
  return (
    <div className="App">
      <h1 onClick={test}>Hello StackOverflow</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

你可以在这里看到一个工作示例：https : //codesandbox.io/s/wz9y5lqyzk

我正在刷卡内渲染 VictoryChart，并且刷卡很慢。我怀疑原因是图表渲染缓慢（当替换为静态图像时，滑动速度很快）。

阅读各种关于 Victory 和 Victory Native 性能的讨论，似乎渲染缓慢的原因之一是动画。

我没有在图表中做任何动画。

除了我在下面的代码中所做的之外，我是否必须明确禁用动画？

任何其他建议如何提高此图表的渲染性能？（我知道对值进行预先排序可能会有所帮助。还有什么别的吗？）

<VictoryChart scale={{ x: 'time' }}>
  <VictoryAxis tickFormat={(t) => `${t.getHours()}:${t.getMinutes()}`}/>
  <VictoryAxis dependentAxis/>

  <VictoryCandlestick data={candleStickData} />

  <VictoryLine labels={['']}
    animate={{ duration: 0, onLoad: { duration: 0 } }}
    data={[
      { x: dateStartX, y: dateStartY },
      { x: dateStartX, y: dateStartY }
    ]}
  />

  <VictoryLine
    labels={['']}
    animate={{ duration: 0, onLoad: { duration: 0 } }}
    data={[
      { x: secondDateStartX, y: secondDateStartY },
      { x: secondDateStartX, y: secondDateStartY }
    ]}
  />

</VictoryChart>

（也发布在https://github.com/facebook/react-native/issues/27583）

更新：一天过去了，我再次启动了我的应用程序。自发布问题以来没有改变任何东西。现在它工作正常。不知道发生了什么......从两个人将这个问题标记为有用的事实，我明白我不是唯一一个遇到这个问题的人......

我正在运行一个非常基本的“应用程序”（单个文件，单个组件），其代码附在下面，使用 React Native 0.61。

使用 genymotion 在 windows 10 上为 android 开发。

快速刷新已打开，但它似乎不起作用，例如，在以下情况下：

1. 我正在将“帖子”字符串更改为“新帖子”
2. 当我删除帖子按钮时

只有调试菜单的“重新加载”刷新应用程序并呈现更改。知道为什么吗？

这是代码：

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';

export const App = () => {

  const [resource, setResource] = useState('todos');

  return (
    <View style={{ flex: 1, alignItems: 'center', marginTop: 30 }}>
      <View style={{ flexDirection: 'row', marginTop: 0,
        alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity onPress={() => (setResource('posts'))}>
          <View style={styles.button}>
            <Text style={styles.buttonText}> …

(也在https://github.com/react-navigation/react-navigation/issues/4059#issuecomment-453100740中提问)

我已经用动态替换了一个静态TabNavigator,事情似乎有效.
但是,按预期传递的道具不再以相同的方式传递.
知道如何解决这个问题吗？通过在静态解决方案中传递道具,或通过传递所需的道具(this.props.navigation).

这是我的顶级导航器:

export default createDrawerNavigator({
    Drawer: MainDrawerNavigator,
    Main: MainTabNavigator
}, {
  contentComponent: props => <Drawer {...props} />,
});

这是静态选项卡导航器和其中一个堆栈:

const ProfileStack = createStackNavigator({
  Profile: {
    screen: Profile,
    navigationOptions: () => ({
        title: 'Profile'
    })
  }
}, {
  initialRouteName: 'Profile'
});

ProfileStack.navigationOptions = {
  tabBarLabel: 'Profile',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name= 'md-person' />
  )};

const MainTabNavigator = createBottomTabNavigator({
  RequestStack,
  ProfileStack
}, {
    headerMode: 'none',
    initialRouteName: ProfileStack
});

和Profile屏幕:

import React …

我在我的项目中使用了formik库。还使用 yup 库进行表单字段验证。我想在连接到提交方法的 api 之前检查表单是否有效。下面是我的项目中使用的代码。

<Formik
                    isInitialValid = {false}
                    initialValues={this.formData}
                    validationSchema={CRYP_LOGIN_SCHEMA}
                    onSubmit={this.loginSubmit.bind(this)}>
                    {({ errors, status, touched, isValid }) => (
                        <Form  className="login_reg_form">
                            <div className="input_control_wrp mb-4">
                                <div className="input_control">
                                    <span className="left_icon"><i className="fas fa-user"></i></span>
                                    <Field placeholder="Enter your Email" name="email" />
                                </div>
                                {errors.email && touched.email && <span className="mt-1 input_error">{errors.email}</span>}
                            </div>

                            <div className="input_control_wrp mb-2">
                                <div className="input_control">
                                    <span className="left_icon"><i className="fas fa-key"></i></span>
                                    <Field type={this.state.pwdType} placeholder="Enter your Password" name="password" />
                                    <a
                                     onClick={this.togglePwdType.bind(this)}
                                     href="javascript:void(0)"
                                     className="right_icon">
                                        <i className={this.state.pwdType == 'password' ? 'fas fa-eye' : 'fas fa-eye-slash'}></i>
                                     </a>
                                </div>
                                {errors.password && …

这只是一个关于react的理论问题。

我目前正在学习 ReactJS，它非常好，但我对此感到困惑，希望得到答复。

在我在网上找到的每个教程中（其中大多数已有多年历史，我使用的是 React 16.8，这应该是最新版本），每个人都指出onChange在创建表单组件时使用它很重要。在这些教程中，如果没有onChange事件，您将无法在表单中键入任何内容。

我觉得奇怪的是，我可以输入文本，并且现在一切正常，无需使用任何onChange事件。

我的问题是：

• 仍然是强制性的吗？
• 使用它是一个好的习惯吗？
• 我应该忽略它并在没有它的情况下编写代码吗？

所以，主要的问题是，antd表单没有检测到我基于antd标准输入的自定义输入：有一段表单代码（AddProduct）：

                   <Form.Item
                        className="m-t-10"
                        name="price"
                        rules={[
                            {
                                required: true,
                                message: `${t('FORM.ERR.SHOP.PRICE')}`,
                            },
                        ]}
                    >
                        <CurrencyInput size="small" placeholder={t('FORM.SHOP.PRICE_VAT')} name="price" />
                    </Form.Item>

有我的自定义输入（CurrencyInput）：

return (
    <Input size={props.size} placeholder={props.placeholder} name={props.name} type="number" prefix={settings[6].value} />
)

问题是，当我尝试提交表单时，它没有检测到货币输入，并抛出该字段为必填字段的错误。任何想法都可以实现自定义输入，基本上，它比自定义输入更多 HOC