标签: react-navigation

假设我有这个屏幕:

当用户点击白色工具提示时,它会重定向到另一个屏幕.有时应用程序滞后一点,点击工具提示大约需要2秒才能看到屏幕发生变化.问题是,在这些2s期间,用户再次点击此工具提示以实现它.

我得到的结果是我的StackNavigator中有两个新屏幕实例.我的意思是我看到了我的新屏幕,但是当我点击"返回"时,我不会返回到这个"搭便车地图"屏幕,而是返回同一个屏幕的另一个实例.

如果我在那些2s期间在标注上点击了5次,那么我需要点击5次"返回"返回到地图屏幕.有什么办法可以阻止吗？只将一个实例放入StackNavigator中？

我正在使用React Navigation,更确切地说是StackNavigator.这是我的代码:

"点击工具提示"部分:

<MapView.Marker
  onCalloutPress={() => this.props.navigation.navigate('spotDetails', { spotId: marker.id })}
/>

我的屏幕:

const HMapNavigator = StackNavigator({
  HMap: { screen: HMapViewContainer },
  spotDetails: { screen: SpotDetailsViewContainer },
});

我能fetch一个ListView并显示详细信息页面onPress的任何列表项的。我可以在中显示被点击项目的详细信息，DetailsPage但只能在中显示render()。如何访问渲染之外的任何值？我想将该值用于fetch其他API的信息

主页：

import React, { Component } from 'react';
import { 
 AppRegistry, StyleSheet, ListView, 
 Text, TouchableHighlight, View
} from 'react-native';

import { StackNavigator } from 'react-navigation';
import DetailsPage from './src/DetailsPage';    

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'MyApp!',
  };

   constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      userDataSource: ds,
    };
  }

  componentDidMount(){
      this.fetchUsers();
  }

    fetchUsers(){

        fetch('https://jsonplaceholder.typicode.com/users') …

我将我的整数数组设置为selectedStyleIds。为什么我的this.props.navigaion.setParams无法正常工作？

  _setSelectedStyleIds = (selectedStyleIds) => {
    const action = NavigationActions.setParams({ 
        params: {selectedStyleIds},
        key: 'id-1509842157447-6' <- got this from console
    });
    this.props.navigation.dispatch(action);
    this.props.navigation.setParams({styleIds:selectedStyleIds});
    this.setState({selectedStyleIds});
  }

onCheck = ({selectedStyleIds}) => {
    console.log('onCheck');
    console.log(selectedStyleIds); <- [1,2,3,4,5]
    this.props._setSelectedStyleIds(selectedStyleIds);
    this.setState({selectedStyleIds}); <- working
}



_handleTagStylePress = () => {
    this.props.navigation.navigate('TagStyle', {onCheck: this.onCheck, selectedStyleIds: this.state.selectedStyleIds});
}

在onNavigatioOptions上（仅用于调试）

onPress={() => {
          let {image, text, ..., selectedSeasonIds,
            gender, selectedSizeIds, selectedColorIds, selectedStyleIds,
            brand, ..., base64 } = navigation.state.params;
          console.log('onsave')
          console.log(navigation.state.params.selectedStyleIds) <<-- []  

我已经检查了这些行超过50次，但显然this.props.navigation.setParams({selectedStyleIds});无法正常工作。

其他所有设置状态和参数都没有问题，但只能将selectedStyleIds设置为navigation.state.params。

我正在使用React Native和react-navigation制作应用程序.

[我的应用程序的层次结构]

*抽屉(APP)

ㄴStackNavigator

ㄴStackNavigator

我想要的是火 navigation.navigate('DrawerOpen');

我可以通过从左边缘拖动来显示我的抽屉,但不是通过按导航标题左侧的"菜单按钮"触发它.我花了这么多次来存档这个.请帮我.

const Nav = StackNavigator({
    mainnav_list:{
        screen: (props) => <TodoList {...props} dbCollectionName={props.screenProps.dbCollectionName}/>,
        navigationOptions:({navigation}) => ({
            headerLeft:(
                <TouchableOpacity onPress={() => {console.log(navigation); navigation.navigate('DrawerOpen');}}>
                    <Text style={{color:'white', marginLeft:15}}>Menu</Text>
                </TouchableOpacity>
            )
        })
    },
    mainnav_detail:{screen: TodoDetail}
}
,
{
    navigationOptions:(props) => ({
        title:props.screenProps.dbCollectionName,
        headerBackTitle:null,
        headerStyle:{backgroundColor:'#000'},
        headerTitleStyle:{color:'#fff'},
        headerTintColor:'#fff',
    })
})

const AppDrawer = DrawerNavigator(
{
    drawer1:{screen:() => <Nav screenProps={{dbCollectionName:'todos'}}/> },
    drawer2:{screen:() => <Nav screenProps={{dbCollectionName:'todos2'}}/> }
})

AppRegistry.registerComponent('TodosFS', () => AppDrawer);

我在我的React Native项目中使用react-navigation，我正在设置使用Detox的自动化测试。

不幸的是，我在文档中没有看到有关如何告诉排毒找到（然后点击）标签导航器标签的任何内容。

我尝试使用react-devtools浏览组件树，但无法确定哪个元素代表了选项卡按钮本身。

我还尝试通过文本查找元素，如下所示：

await element(by.text('My Tab Button')).tap();

但这是通过“找不到UI元素”错误引起的。

感谢您提供任何帮助。

我正在尝试理解反应导航,我正在设置一个概念应用程序来理解.

我最初在努力的是,我得到错误信息"路由的组件"SomeRoute"必须是一个React组件"

我知道,这意味着什么,但我不明白为什么会抛出这个错误.

我有以下设置:

App.js:

import React from 'react';
import { Root } from './config/router';
import { SafeArea } from 'react-native';
class App extends Component {
    render() {
        return <Root />;
    }
}
export default App;

router.js(config/router.js)

import React from 'react';
import { DrawerNavigator, TabNavigator, StackNavigator } from 'react-navigation';

import Feed from './../components/Feed';
import Search from './../components/Search';
import Favorites from './../components/Favorites';

import TextList from './../components/ComingSoon';
import Detail from './../components/Detail';
import Downloads from './../components/Downloads';

export const FeedStack = StackNavigator({

    Feed: { …

我使用reactnavigation，并且将状态栏隐藏在顶部，但是在标题上方留有空白。

我已经尝试过paddingTop或marginTop，但是没有任何效果。

这就是我隐藏状态栏的方式。

import React from 'react';
import { Platform, View, StatusBar } from 'react-native';
import { Tabs, Drawer } from './config/router';

const App = () => (
    <View style={{flex:1}}>
        <StatusBar hidden={true} />
        <Drawer />
    </View>
);

export default App;

任何想法都会有所帮助。

谢谢。

我正在尝试在DrawerNavigator中自定义我的StackNavigator。

这是我的代码：

const HomeStack = createStackNavigator(
  {
    HomeScreen,
    HomeDetailScreen,
    InteriorScreen,
    InteriorDetailScreen
  },
  {
    initialRouteName: "HomeScreen",
    navigationOptions: {
      headerTitleStyle: {
        color: headerColor
      },
      headerBackTitleStyle: {
        color: headerColor
      },
      headerTintColor: headerColor
    }
  }

const MainStack = createStackNavigator(
  {
    HomeStack,
    ChooseLocationScreen,
    FilterHomesScreen
  },
  {
    initialRouteName: "HomeStack",
    mode: "modal",
    navigationOptions: ({ navigation }) => {
      const options = {
        headerTitleStyle: {
          color: headerColor
        },
        headerBackTitleStyle: {
          color: headerColor
        },
        headerTintColor: headerColor,
        drawerLabel: SCREEN_TEXT_HOME_HEADER,
        drawerIcon: ({ tintColor }) => (
          <Image
            source={require("../assets/icons/home.png")}
            resizeMode="contain"
            style={{ width: …

第一个屏幕截图未应用SafeAreaView，第二个屏幕截图正在应用SafeAreaView

如清楚所示，Stack header与以前相比，它看起来笨重。无论如何，有什么我们可以SafeAreaView只适用于底部的？

我正在尝试使用redux设置反应导航v3。在react navigation文档中，我可以成功设置导航，并且无需添加redux即可正常运行。但是，当我尝试添加我的redux class App extends React.Component{...}并连接我的操作时，它将引发以下错误：

永久违反：永久违反：在“ Connect（AuthScreen）”的上下文中找不到“ store”。将根组件包装在中，或者将自定义React上下文提供程序传递给connect选项中的Connect（AuthScreen）并将相应的React上下文使用者传递给Connect（AuthScreen）。

App.js

const MainNavigator = createBottomTabNavigator({
  welcome: { screen: WelcomeScreen },
  auth: { screen: AuthScreen },
  main: {
    screen: createBottomTabNavigator({
      map: { screen: MapScreen },
      deck: { screen: DeckScreen },
      review: {
        screen: createStackNavigator({
          review: { screen: ReviewScreen },
          settings: { screen: SettingsScreen }
        }) 
      }
    })
  }
});

const AppContainer = createAppContainer(MainNavigator);

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppContainer />
      </Provider>
    );
  }
}


export …