Question

我正在学习做出反应原生并尝试制作一个应用程序，作为主导航器的Tab Navigator，我正在尝试使用Stack Navigation来显示单页面视图。

这是我的App.js

  import TopMovies from './components/TopMovies';
  import { StyleSheet, Text, View, Image, ViewPagerAndroid, TextInput, ScrollView, Button, Alert } from 'react-native';
  import { TabNavigator } from 'react-navigation';
  import Ionicons from 'react-native-vector-icons/Ionicons';

  const MainScreenPage = () => (
   <View>
      <TopMovies />
   </View>
   )

 const SearchPage = () => (
  <View style={{alignItems: 'center', justifyContent: 'center'}}>
  </View>
  )

  const RootTabs = TabNavigator({
  MSPage: {
    screen: MainScreenPage,
    navigationOptions: {
      tabBarLabel: 'Top Movies',
      tabBarIcon: ({ tintColor, focused } )=>(
        <Ionicons
        name={focused ? 'ios-home' : 'ios-home-outline'}
        size={26}
        style={{ color: tintColor }}
      />
      ),
    },
  },
  SPage: {
    screen: SearchPage,
    navigationOptions: {
      tabBarLabel: 'Search',
      tabBarIcon: ({ tintColor, focused } )=>(
        <Ionicons
        name={focused ? 'ios-home' : 'ios-home-outline'}
        size={26}
        style={{ color: tintColor }}
      />
      ),
    },
  },
  });

所以我有两个名为MainScreenPage和SearchPage的屏幕。现在在MainScreenPage内部我有一个名为TopMovies的组件，我在其中获取API并循环渲染数据。

这是我的TopMovies组件。

  import React from 'react';
  import { StyleSheet, Text, View, Image, FlatList, Alert, Button } from 'react-native';
  import { StackNavigator } from 'react-navigation';

  class DetailsPage extends React.Component {
    render() {
      return(
        <View>
           <Text>details</Text>
        </View>
          )
      }
   }

export default class TopMovies extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
        apiTopLoaded: false,
        topPopularMovies: [],    
    }
    this.conditionalTopPopular = this.conditionalTopPopular.bind(this);
 }


  componentDidMount() {
   fetch('someurl')
    .then((response)=>{
        response.json()
            .then((popularMovies) => {
                this.setState({
                    apiTopLoaded: true,
                    topPopularMovies: popularMovies.results,
                })
            })
         })
       }

  conditionalTopPopular() {
    if(this.state.apiTopLoaded===true) {
        return(
            <View>
                <FlatList
                    data={this.state.topPopularMovies}
                    renderItem={({ item }) => (
                    <View>
                        <Text>{item.original_title}</Text>
                        <Button onPress={()=>this.props.navigation.navigate("Details")} title="See Details"/>
                    </View>
                    )}
                    keyExtractor={item => item.id}
                />
            </View>
        )       
      }
     }

  render() {
    return (
      <View>
        {this.conditionalTopPopular()}
      </View>
     );
   }
  }


  const StackConst = StackNavigator ({
   Details : {
     screen: DetailsPage,
       }
     })

  export default StackConst;

平面列表中有一个按钮，当点击时，应该打开一个名为＆＃34; Details＆＃34;的新屏幕。但是我得到一个错误，上面写着＆＃34; undefined不是onPress按钮行上的对象（评估＆＃39; _this4.props.navigation.navigate＆＃39;）。我不知道造成这种情况的原因。是因为我的堆栈导航在选项卡导航中，我需要以某种方式链接它们？此外，我遇到的另一个问题是无法导出StackConst。我无法导出它，因为我已经将TopMovies组件导出为默认值，当我尝试export default StackConst时，它表示我只能为每个模块导出一个默认值。请帮忙。

Answer 1

你可以尝试将导航道具传递给组件Topmovies吗？

`

const MainScreenPage=(props)=>(
   <View>
      <TopMovies navigation={props.navigation}/>
   </View>
 )

`

嵌套会对原生导航做出反应

1 个答案: