我只是想知道如何调用函数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事件.
我有2个AnimatedAPI 问题.
1st:我可以使用以下代码从左到右显示图像.我想将图像从位置缩放X=40 (leftPadding), Y=100(topPadding), height:20, width:20到X=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) 我能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) 在调度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语法相同?
如何结合使用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) 如何隐藏标签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) 我试图调用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) 我正在尝试基于数据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()但函数不运行.我怎样才能做到这一点?
我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) 我如何使用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是一个key和value它的整个object.
这可以通过array.reduce不使用任何for loop或groupBy?
我想显示基于状态值的组件。我的
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'
我在做什么错?
所以我的代码是:
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函数的大洲数组的内容。我怎么做? …
我正在使用 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) reactjs ×11
react-native ×8
javascript ×7
ecmascript-6 ×2
react-redux ×2
redux ×2
array-reduce ×1
arrays ×1
fetch ×1
jquery ×1
map-function ×1
react-spring ×1
tabnavigator ×1