小编Som*_*ame的帖子

调用函数onPress React Native

我只是想知道如何调用函数onPress.我设置了这样的代码:

export default class Tab3 extends Component {
    constructor(props) {
        super(props);
        this.state = {myColor: "green"};
    }

    handleClick = () => {
        if (this.state.color === 'green'){
           this.setState({myColor: 'blue'});
        } else {
           this.setState({myColor: 'green'});
        }
    }

    render() {
     return(
      <View>
           <Icon
            name='heart'
            color={this.state.myColor}
            size= {45}
            style={{marginLeft:40}}
            onPress={() => handleClick(this)}                                 
            />
      </View>
      )};
Run Code Online (Sandbox Code Playgroud)

但是当我尝试这个时,我会收到错误 can't find variable handleClick

请帮忙.我只想知道如何将函数绑定到click事件.

javascript reactjs react-native

3
推荐指数
2
解决办法
1万
查看次数

React Native Animated缩放图像

我有2个AnimatedAPI 问题.

1st:我可以使用以下代码从左到右显示图像.我想将图像从位置缩放X=40 (leftPadding), Y=100(topPadding), height:20, width:20X=20, Y=10, height:250, width:300.我该如何实现这一目标?

我的代码:

import React, { Component } from 'react';
import { StyleSheet, Text, Image, Animated, Easing, View, Button } from 'react-native';

class MyTestComp extends Component {
  componentWillMount() {
    this.animatedValue = new Animated.Value(0);
  }
  buttonPress(){
  this.animatedValue.setValue(0);
    Animated.timing(this.animatedValue,{
      toValue:1,
      duration:1000,
      Easing: Easing
    }).start()
  }

  render() {

    const translateX = this.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [-500, 1]
    })

    const transform = [{translateX}];

    return (
      <View>
        <Text>MyTestComp</Text>
        <Animated.View …
Run Code Online (Sandbox Code Playgroud)

reactjs react-native react-animated react-animations

3
推荐指数
1
解决办法
1万
查看次数

在渲染器外部使用StackNavigation访问传递的数据

我能fetch一个ListView并显示详细信息页面onPress的任何列表项的。我可以在中显示被点击项目的详细信息,DetailsPage但只能在中显示render()。如何访问渲染之外的任何值?我想将该值用于fetch其他API的信息

主页:

import React, { Component } from 'react';
import { 
 AppRegistry, StyleSheet, ListView, 
 Text, TouchableHighlight, View
} from 'react-native';

import { StackNavigator } from 'react-navigation';
import DetailsPage from './src/DetailsPage';    

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'MyApp!',
  };

   constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      userDataSource: ds,
    };
  }

  componentDidMount(){
      this.fetchUsers();
  }

    fetchUsers(){

        fetch('https://jsonplaceholder.typicode.com/users') …
Run Code Online (Sandbox Code Playgroud)

fetch reactjs react-native react-navigation

2
推荐指数
1
解决办法
607
查看次数

在Redux reducer中将数据移到阵列中

在调度UPDATE_DATA操作时,我可以state.data使用以下代码将数据推送到reducer中的数组.

const toPush = {
    name : "Pushed Name",
    id_name : 100,
    more1 : "pushedMore01"
}

case "UPDATE_DATA":
  return {
    ...state,
    data: [...state.data, toPush],
    isFetching: false
}
Run Code Online (Sandbox Code Playgroud)

如何取消移位而不是将数据推送到状态?什么是干净的ES6语法相同?

javascript ecmascript-6 reactjs redux react-redux

2
推荐指数
1
解决办法
885
查看次数

将StackNavigator与TabNavigator集成

如何结合使用StackNavigator和TabNavigator?

我的以下代码有效:

index.android.js:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

import { StackNavigator,TabNavigator } from 'react-navigation';


import TestComp1 from './src/components/TestComp1'
import TestComp2 from './src/components/TestComp2'
import TestComp3 from './src/components/TestComp3'
import TestComp4 from './src/components/TestComp4'
import TestComp5 from './src/components/TestComp5'

export default class myApp extends Component {
  render() {
    return (

        <MyApp />

    );
  }
}


const MyApp = StackNavigator({
  TestComp1: {screen:TestComp1},
  TestComp2: {screen:TestComp2}
});

const Tabs = TabNavigator({
  TestComp3: {screen:TestComp3},
  TestComp4: {screen:TestComp4}
  TestComp5: {screen:TestComp5}
}); …
Run Code Online (Sandbox Code Playgroud)

reactjs react-native react-navigation

2
推荐指数
1
解决办法
2092
查看次数

隐藏TabNavigator中的标签 - ReactNavigation

如何隐藏标签TabNavigator并仅显示icons?如果我执行以下操作:

const Tabs = TabNavigator({
  Home: {
    screen:MainHome,
    navigationOptions: ({ navigation }) => ({
        title: "Home",  //Tried to hide this for next tab Search.
        tabBarIcon: ({ tintColor, focused }) => <View><MaterialIcons name="home"/></View>
      })
  },
  Search: {
    screen:TestComp1,
    navigationOptions: ({ navigation }) => ({
      //If no title it shows the name as Search.
      tabBarIcon: ({ tintColor, focused }) => <View><MaterialIcons name="accessibility"/></View>
    })

  }
}, { 

   tabBarPosition: 'bottom',

   tabBarOptions: {
    showIcon: true,
    activeTintColor: '#e91e63',  //Not working for icons. …
Run Code Online (Sandbox Code Playgroud)

tabnavigator reactjs react-native react-navigation

2
推荐指数
2
解决办法
5732
查看次数

ReactNative Flatlist onEndReached不起作用

我试图调用onEndReachedFlatList 的函数,但它不起作用.

我在最后打电话给this.state.pageNo它,但它没有更新.我想稍后在无限滚动中使用这个逻辑,但现在无法使它工作.

 import React, { Component } from "react";
 import {
  View,
  Text,
  StyleSheet,
  Button,
  TouchableOpacity,
  FlatList,
  Alert
  } from "react-native";

 class InfiniteScrollRedux extends Component {
   constructor(props) {
      super(props);
      this.state = {
        loading: false,
        pageNo: 1,
        data: [
            { id: 1, name: "Name01" },
            { id: 2, name: "Name02" },
            { id: 3, name: "Name03" },
            { id: 4, name: "Name04" },
            { id: 5, name: "Name05" },
            { id: 6, name: "Name06" }
        ] …
Run Code Online (Sandbox Code Playgroud)

reactjs react-native react-native-flatlist

2
推荐指数
3
解决办法
8220
查看次数

使用jquery数据属性创建函数

我正在尝试基于数据attr在jQuery中创建一个函数.

<input type="text" name="name" id="name" data-validate="validatename" />

$("#name").blur(function(){
    var validate = $(this).attr("data-validate");
    var newvalidate = validate+"()";
    newvalidate;
});

function validatename(){
   alert("success"); 
}
Run Code Online (Sandbox Code Playgroud)

调试给出newvalidateas 的值,validatename()但函数不运行.我怎样才能做到这一点?

jquery

1
推荐指数
1
解决办法
203
查看次数

state.findIndex不是findIndex的函数错误

id将对象作为action.payloadreducer传递给修改对象.

减速器:

const initialState = {
  posts: [
    {id:1, name:'post1', number:11},
    {id:2, name:'post2', number:22},
    {id:3, name:'post3', number:33}
  ]
}

export default function newData (state = initialState, action) {

  switch (action.type) {

    case "updateNumber": {

  // find object to update
    const index = state.findIndex(({ id }) => id == action.payload);

    if (index > -1 ) {
      const toIncrement = state[index];
      const number = toIncrement.number++;

      // create new object with existing data and newly incremented number
      const updatedData …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-native redux react-redux

1
推荐指数
1
解决办法
4121
查看次数

减少数组以更改内容

我如何使用array.reduce来改变数组内容的方式.我不想对内容做任何数学.

Orinal数组:

var myArray = [
    {id:1, name:'name01', value:11},
    {id:2, name:'name02', value:22},
    {id:3, name:'name03', value:33},
    {id:4, name:'name04', value:44},
    {id:5, name:'name05', value:55}
]
Run Code Online (Sandbox Code Playgroud)

我希望它改为:

[
    {1:{id:1, name:'name01', value:11}},
    {2:{id:2, name:'name02', value:22}},
    {3:{id:3, name:'name03', value:33}},
    {4:{id:4, name:'name04', value:44}},
    {5:{id:5, name:'name05', value:55}}
]
Run Code Online (Sandbox Code Playgroud)

因此,id在弹出的object是一个keyvalue它的整个object.

这可以通过array.reduce不使用任何for loopgroupBy

javascript arrays ecmascript-6 array-reduce

0
推荐指数
1
解决办法
58
查看次数

三元运算符的附加条件

我想显示基于状态值的组件。我的

import React, {Component} from 'react';

import One from './One'
import Two from './Two'
import Three from './Three'

class MyTest extends Component{

    constructor(props){
      super(props);
      this.state = {
          slide: 1
        }
      }

    handleClick=()=>{
        const counter=this.state.slide;
        this.setState({
                slide:counter+1
        })
    }

render(){
    return (
             <div onClick={this.handleClick}>
                {this.state.slide===1 ? <One /> : 
                   {this.state.slide===2 ? <Two /> : <Three /> } }
             </div>     
           )
    }

}

export default MyTest;
Run Code Online (Sandbox Code Playgroud)

我得到了错误:{this.state.slide===2 Parsing error: Unexpected keyword 'this' 我在做什么错?

javascript ternary-operator reactjs

0
推荐指数
1
解决办法
41
查看次数

从状态映射数组内的数组

所以我的代码是:

class MyComponent extends Component {
    constructor(props) {
      super(props);

        this.state = {

            myArray: [
                {id:1, continent:[
                    {id:1, name: 'Russia'},
                    {id:2, name: 'Germany'},
                    {id:3, name: 'Poland'}
                ]},

                {id:2, continent:[
                    {id:1, name: 'China'},
                    {id:2, name: 'India'},
                    {id:3, name: 'Bangladesh'}
                ]},

                {id:3, continent:[
                    {id:1, name: 'Brazil'},
                    {id:2, name: 'Peru'},
                    {id:3, name: 'Chile'}
                ]}      
            ],

            otherValue: 23
        }
    }


    subBoardList(id){
        return this.state.myArray[id].map((continent) => {
            return(
                <View>
                    <Text>{continent.name}</Text>
                </View>
            )
        })
    }


  render() {
    return (
      {this.subBoardList(2)}
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

我想显示将 id 传递给subBoardList函数的大洲数组的内容。我怎么做? …

javascript reactjs react-native map-function

0
推荐指数
1
解决办法
87
查看次数

useTransition 不适用于我的代码 - TypeError: 无法读取未定义的属性“文本”

我正在使用 React-Spring useTransition 并收到错误:

TypeError: Cannot read property 'text' of undefined

import React, { useState } from 'react'
import { useSpring, useTransition, animated } from 'react-spring'


function MyApp() {

  const [items, setItems] = useState([
    { id: 1, text: 'Item1' }, { id: 2, text: 'Item2' }
  ]);


  const transition = useTransition(items, item => item.id, {
    from: { opacity: 0, marginLeft: -100, marginRight: 100 },
    enter: { opacity: 1, marginLeft: 0, marginRight: 0 }
  })

  return (
    <>
      <div>
        {transition.map(({ item, …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-spring

0
推荐指数
1
解决办法
1249
查看次数