Question

我是新来的本地人。我尝试使用createStackNavigator模块。但是，我不知道为什么我的onClick函数不能将我定向到所需的屏幕。这是我的代码，如下所示：

mySpaceRouter.js

import {createStackNavigator} from 'react-navigation'
import SubscriptionScreen from './subscribed'
import MySpaceScreenRT from './myspace'
import React, {Component} from 'react'

const RootStack = createStackNavigator(
  {
    MySpace : MySpaceScreenRT,
    subscribed : SubscriptionScreen,

    navigationOptions:{
       header:{ visible:false }
      }
  },
  {
      initialRouteName : 'MySpace',
  },

)

class MySpaceScreen extends Component{
  render(){
    return(
      <RootStack />
    )
  }
}

export default MySpaceScreen;

mySpace.js

import React, { Component } from 'react'
import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native'
import { Avatar, Button, Icon } from 'react-native-elements'
import MyButton from '../Button'

class MySpaceScreenRT extends Component {

  render() {

    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <View style={styles.textHolder}>
            <Text style={styles.headerText}>My Space</Text>
          </View>
        </View>
        <View style={styles.boxContainer} >
          <ScrollView style={styles.scrollContainer}>
            <View style={styles.profileContainer}>
              <Avatar
                large
                rounded
                title="CR"
                onClick={() =>this.props.navigation.navigate('subscribed')}
                activeOpacity={0.7}
              />

             <Text style={styles.profileName}>Christaino Ronaldo </Text> 

            </View>
            <MyButton text='Subscribed' icon='ios-play' />
            <MyButton text='Downloads' icon='ios-folder-open' onPress ={() => console.log('Works!')} />
            <MyButton text='History' icon='ios-timer-outline' />
            <MyButton text='Rate Our App' icon='ios-star-half' />
          </ScrollView>
        </View>

      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1,
  },
  header: {
    height: 70,
    backgroundColor: '#780c1c',
    elevation: 5,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  boxContainer: {
    flex: 1,
    flexDirection: 'column',


  },
  textHolder: {

  },
  headerText: {
    fontSize: 20,
    color: 'white'
  },
  profileContainer: {
    height: 150,
    borderColor : '#696969',
    borderBottomWidth: 0.5,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
  },
  profileName: {
    position: 'relative',
    zIndex: 1,
    fontSize: 16,
    color: '#000000',
    alignSelf: 'center',
    marginTop: 10,
    marginLeft: 10
  },
  scrollContainer: {
    flexDirection: 'column',
  },
  icons: {
    marginTop: 10
  },
  Text: {
    fontSize: 18,
    alignSelf: 'center',
    padding: 10
  }

})

export default MySpaceScreenRT;

subscribed.js

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

class SubscriptionScreen extends Component {
    render(){
        return(
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>SubscriptionScreen!</Text>
            </View>
    )
     }
}

export default SubscriptionScreen;

谢谢。

Answer 1

使用react-native，您使用this.setState(((prevState) => ({ postData:{ ...prevState.postData, likes: prevState.postData.likes + 1, } });而不是onPress()。

onClick()

Answer 2

您必须为堆栈中的每个屏幕创建一个条目，因此您应该执行以下操作：

const RootStack = createStackNavigator({
  MySpace: {
    screen: MySpace,
    navigationOptions: ({ navigation }) => ({
      title: "My Space" ,
      header:{ visible:false }
    }),
  },
  subscribed: {
    screen: SubscriptionScreen,
    navigationOptions: ({ navigation }) => ({
      title: "" ,
      header:{ visible:false }
    }),
  }
  },{ 
   initialRouteName : 'MySpace',
  })

除了必须将onClick更改为onPress

堆栈浏览器出现问题

2 个答案: