#javascript #react-native #mobile
#javascript #react-native #Мобильный
Вопрос:
Я переместил часть Instaounce.js класс в Post.js файл для повторного использования. Когда я пытаюсь создать компонент Post внутри компонента View в Instaounce, а Instaounce — внутри компонента View в App.js функциональность onPress в Post.js (Строка 38) не работает. Однако, когда я запускаю Post.js внутри компонента View из App.js при замене Instaounce функциональность мыши работает.
import React, {
Component
} from 'react';
import {
Image,
Text,
StyleSheet,
View,
Dimensions,
TouchableOpacity
} from 'react-native';
import config from "./config"
import {
PostFeed
} from "./Src/Components/Container"
import Instaounce from "./Src/Instaounce";
import {
Post
} from "./Src/Components/Presentation"
export default class App extends Component {
render() {
return ( <
View style = {
styles.container
} >
<
Instaounce / > //onPressed functionality works when this is <Post/>
<
/View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
topBar: {
width: "100%",
height: 70,
backgroundColor: "rgb(246, 246, 246)",
borderBottomColor: "rgb(200, 200, 200)",
borderBottomWidth: StyleSheet.hairlineWidth,
justifyContent: "center",
alignItems: "center"
},
topLogo: {
color: "rgb(0,0,0)",
fontSize: 36,
fontFamily: "Stembase"
},
});
=== === === === === === === === === === === === === === === === === === === === === === === ==
import React, {
Component
} from 'react';
import {
Image,
Text,
StyleSheet,
View,
Dimensions,
TouchableOpacity
} from 'react-native';
import config from "../config"
import {
PostFeed
} from "./Components/Container"
import {
Post
} from "./Components/Presentation"
class Instaounce extends Component {
render() {
return ( <
View style = {
{
flex: 1,
width: "100%",
height: "100%"
}
} >
<
View style = {
styles.topBar
} >
<
Text style = {
styles.topLogo
} > Instaounce < /Text> <
Post / >
<
/View> <
/View>
);
}
}
const styles = StyleSheet.create({
topBar: {
width: "100%",
height: 70,
backgroundColor: "rgb(246, 246, 246)",
borderBottomColor: "rgb(200, 200, 200)",
borderBottomWidth: StyleSheet.hairlineWidth,
justifyContent: "center",
alignItems: "center"
},
topLogo: {
color: "rgb(0,0,0)",
fontSize: 36,
fontFamily: "Stembase"
}
});
export default Instaounce;
=== === === === === === === === === === === === === === === === === === === === === === === =
import React, {
Component
} from 'react';
import {
Image,
Text,
StyleSheet,
View,
Dimensions,
TouchableOpacity
} from 'react-native';
import config from "../../../config"
class Post extends Component {
constructor() {
super();
this.state = {
numberPressed: 0,
liked: false,
screenWidth: Dimensions.get("window").width
}
}
likeToggled() {
this.setState({
liked: !this.state.liked
})
}
render() {
const likeIconColor = (this.state.liked) ? "rgb(250,60,25)" : "rgb(0,0,0)";
return ( <
View style = {
{
flex: 1,
width: "100%"
}
} >
<
TouchableOpacity activeOpacity = {
.98
}
onPress = {
() => {
this.state.numberPressed ;
if (this.state.numberPressed % 2 == 0) {
this.likeToggled()
}
}
} >
<
/TouchableOpacity> <
View style = {
styles.iconBar
} >
<
Image style = {
[styles.icon, {
height: 55,
width: 55,
tintColor: likeIconColor
}]
}
source = {
config.images.likeIcon
}
/> <
Image style = {
[styles.icon, {
height: 37,
width: 37
}]
}
source = {
config.images.commentIcon
}
/> <
Image style = {
[styles.icon, {
height: 45,
width: 45
}]
}
source = {
config.images.shareIcon
}
/> <
/View> <
/View>
);
}
}
const styles = StyleSheet.create({})
export default Post;
Комментарии:
1. Вы не экспортировали третий компонент!
2. @Arvindh, неправильно скопировал вставку, все компоненты экспортированы.
Ответ №1:
Я думаю, что способ обновления состояния неверен. Смотрите этот код this.state.numberPressed
из вашего onPress;
Вы должны заменить его на ‘this.setState`. Это должно быть так:
onPress = {() => {
this.setState(prevSate=> {
const nextPressed = prevSate.numberPressed 1;
if (nextPressed % 2 === 0) {
this.likeToggled()
}
return { numberPressed: nextPressed}
});
}
}
Комментарии:
1. Это отличное использование prevState!
2. Спасибо за предложение, это, вероятно, лучший способ обновления состояния, но это не решило проблему.
Ответ №2:
Возможно, это вам поможет. Попробуйте:
this.state.numberPressed ;
if (this.state.numberPressed % 2 == 0) {
this.likeToggled()
}
this.setState({numberPressed: numberPressed })
if (this.state.numberPressed % 2 == 0) {
this.likeToggled()
}
и
Text style = {
styles.topLogo
} > Instaounce < /Text> <
Post / >
Text style = {
styles.topLogo
} > <Instaounce/> < /Text> <
Post / >