react-native - 堆栈导航器的问题

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;

我的空间.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;

订阅的.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;

谢谢你。

标签： react-nativereact-navigation

Answer 1

使用 react-native 你使用onPress()not onClick()。

onPress={() =>this.props.navigation.navigate('subscribed')}