小编Bom*_*ber的帖子

TypeScript我已经开始在我的React-Native项目中使用

我的 linter 不喜欢函数作为类型，我如何重构我的 hoc 来传递我的 linter？

应用程序导航器：

const withHeader = (
    screen: Function,
    routeName: string,
    Header,
): StackNavigator =>
    createStackNavigator(
        {
            [routeName]: {
                screen,
                navigationOptions: ({routeName, props}) => ({
                    header: props => <Header {...props} />,
                }),
            },
        },
        {
            initialRoute: 'Home',
            cardStyle: {
                backgroundColor: 'transparent',
                opacity: 1,
            },
            transitionConfig: () => ({
                containerStyle: {
                    backgroundColor: 'transparent',
                },
            }),
        },
    );

我的打包程序还给我提供了同一文件的错误：

error: bundling failed: Error: Unable to resolve module `./navigation/AppNavigator` from `C:\Users\Matt\sites\IAapp\App.tsx`: The module `./navigation/AppNavigator` could …

我正在尝试使用状态设置复选框的选中属性，并使用handleChange函数更新代码：

getInitialState: function() {
    return {
        selected:0,
        contactId: 0
    };
},

handleChange: function(e) {
    var id = this.state.contactId;

    console.log(e.target.checked);

    if (e.target.checked === true){

        console.log('selected');

        contactChannel.publish({
                    channel: "contact",
                    topic: "selectedContact",
                    data: {
                        id: [id]
                    }});

    } else{

        basketChannel.publish({
            channel: "basket",
            topic: "removePersonFromBasket",
            data: {
                id: [id]
            }
        });


        console.log('deselected flag');


    }
},
render: function() {

    var id = this.state.contactId;
    var isSelected = this.state.selected;

    console.log(isSelected);

    return (
        <div className="contact-selector">
            <input type="checkbox"
                   checked={isSelected}
                onChange={this.handleChange} />
        </div>
    );
}

但是，一旦默认选中该复选框，我就无法取消选中它，有人可以告诉我该怎么做吗？

非常感谢

我使用以下代码将所选添加到选项：

 <select name="hourSelect" ref="hourSelect">
           {hourSelect.map((option) => (
                  <option value={option.value} {(selectedHour == option.value) ? 'selected' : ''}>{option.label} </option>
            ))}
        </select>

我收到语法错误：语法错误：C:/sites/CalendarRedux/src/components/modals/AddAchievementModal.js：意外的标记，预期... (94:52)

  92 |             <select name="hourSelect" ref="hourSelect">
  93 |                {hourSelect.map((option) => (
> 94 |                       <option value={option.value} {(selectedHour == option.value) ? 'selected' : ''}>{option.label} </option>
     |                                                     ^
  95 |                 ))}
  96 |             </select>

我试图设置我的标题高度,以便对平板电脑和智能手机做出响应.我已经尝试过使用flex列:

const headerStyle = {
  paddingHorizontal: theme.metrics.mainPadding,
  paddingTop: 0,
  paddingBottom: 0,
  backgroundColor: theme.colors.blue,
  flex: 0.5,
  flexDirection: 'column',
};

但是,标题在平板电脑上看起来不错,但在智能手机上太高了.

为不同设备设置尺寸的最佳方法是什么？

编辑:

我有这个功能:

export function em(value: number) {
  return unit * value;
}

我现在在样式表中使用它:

  headerHeight: em(6),
  headerImageWidth: em(3),
  headerImageHeight: em(3),
  headerLogoHeight: em(6),
  headerLogoWidth: em(20),

平板电脑上的图片看起来不错,但现在智能手机上的图片太小了.如果我理解正确,我需要使用dimensions.width在我的函数中设置适当的单位值？

手机

片剂

我正在尝试使用 lodash 检查以下空值：

data.payload{
      name: ""
}

我的代码：

import isEmpty from 'lodash.isempty';

if (isEmpty(data.payload)) {

以上是错误的，我如何验证空值？

我的助手中有此代码：

export const isEmpty = some(obj, function(value) {
  return value === '';
}

);

在我的行动中，我有

    if (isEmpty(data.payload)) {

我收到一个错误，ReferenceError: obj is not defined但我正在传递对象...

我正在尝试更新ajax帖子之后的事件来更改事件的标题并给它一个类,以便我可以更改它的颜色.我还想告诉我的JSON源中的事件是否被批准,如果是,则更改其颜色.我在下面评论了我的代码:

升级代码:

$(document).ready(function () {

var liveDate = new Date();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();






var calendar = $('#calendar').fullCalendar({
    disableDragging: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'year'
    },


    eventClick: function (calEvent, jsEvent, view, eventid) {

        var eventid = calEvent.id;
        var start = calEvent.start;
        var end = calEvent.end;
        var fullname = calEvent.fullname;


        var fancyContent = ('<div class="header">approve booking for ' + eventid + calEvent.title + '<a …

使用npm-inline-css模块时,我试图在一个状态下存储样式时更改某些页面元素颜色.我在这里设置状态:

setHeaderStyle: function(data){
    var headerStyles = this.state.defaultStyles;

    if(data) {
        headerStyles.backgroundColor = data.first_colour;
        headerStyles.color = data.theme;
    }
    this.setState({
        branding: data,
        headerStyles: headerStyles
    });
   },

然后我试图将样式应用于组件:

  render: function (){
    return (
        <div className="our-schools-app">
          <InlineCss stylesheet="
            & .button {
                color: {{this.state.color}};
            }
            " />
            <RouteHandler />  
        </div>
    );
}

但它们输出如下.如何设置内联样式？或者更好的方法我可以做到这一点？

<style scoped="" data-reactid=".0.0.1">#InlineCss-0 .button { color:     {{this.state.color
}

}
; 
}
</style>

我的 . 出现上述错误reducer，如何id在两种开关情况下使用 ？

case "SUBMIT_ANSWER":
    const { current, results, completed, id } = action.data;

    return state.map(video =>
        video.id === id
            ? { ...video, current, results, completed }
            : video
    );
case "RESET_QUIZ":
    const { id } = action;
    console.log("action", action);
    console.log("state", state);
    return state.map(video => {
        video.id == id
            ? {
                  ...video,
                  completed: false,
                  current: 0,
                  results: {
                      correctAnswers: 0,
                      score: 0
                  },
                  totalScore: 0
              }
            : video;
    });

当尝试在我的模拟器上运行本机反应时，我收到此错误，react-native run-android

错误无法识别的命令“run-android”。

我的模拟器已连接并正在运行，有什么想法吗？

包.json：

{
  "name": "iaapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "name": "Inovative Anatomy",
    "flow": "flow",
    "test": "node ./node_modules/jest/bin/jest.js --watchAll"
  },
  "dependencies": {
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@react-native-community/async-storage": "^1.6.1",
    "react": "16.8.5",
    "react-dom": "^16.8.6",
    "react-native": "0.59.10",
    "react-native-circular-progress": "^1.1.0",
    "react-native-component-fade": "^1.0.2",
    "react-native-elements": "^1.1.0",
    "react-native-fade": "^1.0.3",
    "react-native-fade-in-view": "^1.0.5",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-responsive-image": "^2.3.1",
    "react-native-share": "^1.2.1",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "^9.5.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-view-shot": "^2.6.0",
    "react-native-webview": "^5.12.1",
    "react-native-webview-bridge": "^0.40.1",
    "react-navigation": "^3.0.9",
    "react-navigation-backhandler": "^1.3.2",
    "react-navigation-transitions": "^1.0.11", …

我在下面有一个嵌套的抽屉导航器，我在标题中使用了一个自定义组件：

header: props => {
    return <DrawerHeader {...props} />;
},

当我尝试从我的标题中的道具访问当前路线时，如下所示，标题是undefined，我怎样才能获得当前路线？

  render() {
    const {
      navigation,
      videos,
      search: {term},
      scene: {
        route: {routeName: title}, // undefined
      },
    } = this.props;
    return (
      <View>
        <View style={styles.container}>

航海家：

function DrawerStack() {
    return (
        <Drawer.Navigator>
            <Drawer.Screen
                name="VideoEpisodesScreen"
                component={VideoEpisodesScreen}
            />
            <Drawer.Screen name="TestYourselfScreen" component={TestYourselfScreen} />
            <Drawer.Screen name="MyResultsScreen" component={MyResultsScreen} />
            <Drawer.Screen name="AboutScreen" component={AboutScreen} />
            <Drawer.Screen name="TestsScreen" component={TestsScreen} />
            <Drawer.Screen
                name="BookmarkedVideosScreen"
                component={BookmarkedVideosScreen}
            />
        </Drawer.Navigator>
    );
}

export default function AppNavigator() {
    return (
        <NavigationContainer>
            <Stack.Navigator> …