javascript - 试图让导航在本机反应的页面之间工作
问题描述
如何将我的 page2.js 和 page3.js 连接到我的 CounterApp.js 页面,到目前为止,我的 page2 和 page3 仅与一个按钮连接,我可以在这两个页面之间来回切换,但我需要一个按钮对于我的 CounterApp.js 页面
CounterApp.js /////////////////////////////////////// ///////////////////////////////
import {Image} from 'react-native';
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
TouchableOpacity
} from "react-native";
import { connect } from 'react-redux'
class CounterApp extends Component {
render() {
return (
<View style={styles.container}>
<View style={{ flexDirection: 'row', width: 200, justifyContent: 'space-around' }}>
<TouchableOpacity onPress={() => this.props.increaseCounter()}>
<Text style={{ fontSize: 20 }}>Increase</Text>
</TouchableOpacity>
<Text style={{ fontSize: 20 }}>{this.props.counter}</Text>
<TouchableOpacity onPress={() => this.props.decreaseCounter()}>
<Text style={{ fontSize: 20 }}>Decrease</Text>
</TouchableOpacity>
</View>
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
style={{width: 200, height: 200}} />
<View style={{ flexDirection: 'row', width: 200, justifyContent: 'space-around' }}>
<TouchableOpacity onPress={() => this.props.increaseCounter2()}>
<Text style={{ fontSize: 20 }}>Increase</Text>
</TouchableOpacity>
<Text style={{ fontSize: 20 }}>{this.props.counter2}</Text>
<TouchableOpacity onPress={() => this.props.decreaseCounter2()}>
<Text style={{ fontSize: 20 }}>Decrease</Text>
</TouchableOpacity>
</View>
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
style={{width: 200, height: 200}} />
</View>
);
}
}
function mapStateToProps(state) {
return {
counter: state.counter,
counter2: state.counter2,
}
}
function mapDispatchToProps(dispatch) {
return {
increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
increaseCounter2: () => dispatch({ type: 'INCREASE_COUNTER2' }),
decreaseCounter2: () => dispatch({ type: 'DECREASE_COUNTER2' }),
}
}
export default connect(mapStateToProps, mapDispatchToProps )(CounterApp)
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
page2.js /////////////////////////////////////// ////////////////////
import React, {Component} from 'react';
import {Button} from 'react-native';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const {navigate} = this.props.navigation;
return (
<>
<Button
title="Go to Jane's profile"
onPress={() => this.props.navigation.navigate('Profile', {name: 'Jane'})}
/>
</>
);
}
}
export default HomeScreen;
page3.js /////////////////////////////////////// //////////////////////////////////
import React, {Component} from 'react';
import {Button} from 'react-native';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const {navigate} = this.props.navigation;
return (
<>
<Button
title="Go to Jane's home"
onPress={() => this.props.navigation.navigate('Home', {name: 'Jane'})}
/></>
);
}
}
export default HomeScreen;
mainnav.js /////////////////////////////////////// //////////////////////////////////
import HomeScreen from './page2'
import ProfileScreen from './page3'
import CounterScreen from './CounterApp'
import {createStackNavigator} from 'react-navigation-stack';
const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen},
Profile: {screen: ProfileScreen},
counter: {screen: CounterScreen}
},{initialRouteName:"Home"});
export default MainNavigator;
解决方案
推荐阅读
- mysql - MySQL JSON:如何检查数组中的对象是否具有给定第一个键值的两个键
- android - 如何使用内容值通过外键将数据插入 SQLITE 数据库?
- java - 使用 thread.join() 时抛出 NullPointerException
- python-3.x - 带有 Numpy 数组的矢量化累积串联
- nrwl - 如何在 Nrwl NX 工作区中使用 CSS 模块?
- python - 无法截取宽度为 0 的屏幕截图
- unity3d - 2019 年 Unity3d 的物理学有多少确定性?
- javascript - 在 switch 语句中默认总是首先运行
- java - 如何避免在 Java 中多次调用函数?
- c++ - 试图调节我的执行时间以停止在终端中退出程序。菜单不会根据当前语句的需要循环