标签: react-navigation

我正在学习react-native导航https://reactnavigation.org/docs/intro/.我在那里看到了例子

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

我无法理解这行代码到底是什么 const { navigate } = this.props.navigation;

我有redux的反应导航设置.我的应用程序包含一个带有登录和内容屏幕的父TabBarNavigator.内容屏幕本身就是一个包含应用程序主导航的Stack Navigator.redux和navigators的所有其他方面都按预期工作,但StackNavigator上的默认后退按钮也会触发它的父TabBarNavigator返回.

这是预期的行为吗？我注意到,如果我在navigationOptions中定义headerLeft,它会按预期工作:

static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: (
        <Button transparent onPress={() => { navigation.goBack(); }}><Text>Back</Text></Button>
      )
    };
  };

Cam有谁解释是什么原因造成的？有没有办法让默认的stackNavigator后退按钮与redux一起使用？

我有用户列表,每个用户在列表中都有自己的显示图像.

我正在尝试的是每当用户按下显示图像时,通过stackNavigation重定向到他/她的个人资料.

CustomTabView:

    const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;

  const ActiveScreen = router.getComponentForState(navigation.state);

  const routeNav = addNavigationHelpers({
    ...navigation,
    state: routes[index],
  });
  const routeOptions = router.getScreenOptions(routeNav, 'tabBar');
  return (
    <View style={styles.container}>
      <CustomTabBar
        navigation={navigation}
        activeRouteName={routes[index].routeName}
        icon={routeOptions.tabBarIcon}
      />
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index]
        })}
      />
    </View>
  );
}; 

StackNavigator: // goToProfile.js //也试过放在index.anndroid.js但没找到出口的方法

const goToProfile = StackNavigator({
  Profile: {
    screen: Profile,
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.person.name.first} ${navigation.state.params.person.name.last}`
    })
  },
})

自定义标签: …

React Navigation的介绍页面建议使用以下解构分配:

const { navigate } = this.props.navigation;

但是,当我在我的应用程序中实现React Navigation时,ESLint抱怨此行描述了这两个错误:

道具验证(反应/道具类型)中缺少"导航"

道具验证(react/prop-types)中缺少'navigation.navigation'

即使应用程序似乎按预期工作,如何删除这些错误行？

我是新手,react-navigation并试图围绕如何做以下事情:

鉴于此导航结构:

RootTabNavigator 

  LoggedOut_StackNavigator

    ...

  LoggedIn_StackNavigator

    LoggedIn_TabNavigator <-- TabBar rendered by this Navigator

      TabA_StackNavigator

        ScreenA
        ScreenB

我希望能够从导航ScreenA到ScreenB"从右幻灯片"过渡使用典型的,在这样一种方式,TabBar 是可见的ScreenA,但不可见ScreenB.换句话说,当我导航到时ScreenB,我希望它占据整个窗口.

一旦用户转换ScreenA为ScreenB,他们可以按后退按钮返回ScreenA,或使用TabBar仍然不可见的相同转换导航到新路线.

我尝试过的:

• navigationOptions.tabBarVisible:这个属性似乎只适用于TabA_StackNavigator自身,这意味着它的堆栈中的所有屏幕也隐藏了TabBar.将其添加到StackNavigator内的屏幕无效.

• 添加一个新AllScreens_StackNavigator的兄弟LoggedIn_TabNavigator并导航到此导航器中的路径,我收到错误:Expect nav state to have routes and index, {"routeName":"ScreenB", "params": {}, "key": "init-id-1516..."}.我调度的导航操作试图这样做:

  {
    "action": Object {
      "params": Object {}, …

  Run Code Online (Sandbox Code Playgroud)

我用于TabNavigation我的应用程序.在某些屏幕中,我希望它仅在portrait方向上显示,而其他屏幕则显示landscape.我react-native-orientation在屏幕上找到并尝试:

屏幕1

import React from "react";
import Orientation from 'react-native-orientation';
import { Text } from 'react-native'

export default Screen1 extends React.PureComponent{

 componentDidMount(){
  Orientation.lockToLandscape();
 }

 componentWillUnmount(){
  Orientation.unlockAllOrientations();
 }

 render() {
  return(<Text>Screen 1</Text>);
 }
}

屏幕2

import React from "react";
import Orientation from 'react-native-orientation';
import { Text } from 'react-native'

export default Screen2 extends React.PureComponent{

 componentDidMount(){
  Orientation.lockToPortrait();
 }

 componentWillUnmount(){
  Orientation.unlockAllOrientations();
 }

 render() {
  return(<Text>Screen 2</Text>);
 }
}

标签导航器

const AppNavigator = TabNavigator(  {
  Screen1: …

我正在使用react-navigation,我有一个视图,我想在工具栏中按下图标时显示,我已经使用另一个组件并将组件设置为绝对显示,事实是,所有touchEvents都是通过叠加视图,我尝试在headerRightStyle上设置zIndex和elevation,即使在另一个子视图中也是绝对的视图.我也尝试使用TouchableWithoutFeedback作为包装,但也没有解决问题.

这是我的组成部分

import React, { Component } from 'react';
import {
  View,
  Text,
  UIManager,
  LayoutAnimation,
  Dimensions,
  TouchableWithoutFeedback,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const styles = {
  movieFilterListContainerStyle: {
    position: 'absolute',
    bottom: -300,
    right: -10,
    height: 300,
  },
};

class MovieFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showFilterList: false,
      filterListWidth: 0,
    };
    this.renderFilterList = this.renderFilterList.bind(this);
    this.onShowFilterList = this.onShowFilterList.bind(this);
    this.calculateFilterListWidth = this.calculateFilterListWidth.bind(this);
  }

  componentWillMount() {
    UIManager.setLayoutAnimationEnabledExperimental(true);
    this.calculateFilterListWidth();
    Dimensions.addEventListener('change', this.calculateFilterListWidth);
  }

  componentWillUpdate() {
    LayoutAnimation.spring();
  }

  componentWillUnmount() {
    Dimensions.removeEventListener('change', …

我正在使用react-navigation Tab Navigation.我的标签导航上方有一个标题,它可以折叠和展开对应的scrollView.

这是我的问题:当我一直向上滚动时,标题会崩溃,这就是我想要的,但tabBar将保持静态(请参阅照片).有没有办法我可以设置tabBar margin相应的滚动视图？这样marginTop当标题折叠时就没有了.

const Header_Maximum_Height = 40;
const Header_Minimum_Height = 0;

export default class App extends Component {

  render(){
    return (
      <View style={{flex:1, marginTop:30}}>
        <AppContainer/>
      </View>
    )
  }
}

class HomeScreen extends Component{
      constructor()
    {
         super();
         this.AnimatedHeaderValue = new Animated.Value(0);
     }
render() {

const AnimateHeaderBackgroundColor = this.AnimatedHeaderValue.interpolate(
   {
    inputRange: [ 0, ( Header_Maximum_Height - Header_Minimum_Height )  ],
    outputRange: [ '#009688', '#00BCD4' ],
    extrapolate: 'clamp'
   });

const AnimateHeaderHeight = this.AnimatedHeaderValue.interpolate(
      {
       inputRange: …

我试图将自定义标头注入使用Hooks的React功能组件。

因此，例如，我有以下带有一些钩子的React功能组件：

function StoryHome(props) {
  const [communityObj, setCommunityObj] = useState({
    uid: null,
    name: null,
  });
...
}

StoryHome.navigationOptions = {
  title: 'Stories',
  headerTitleStyle: {
    textAlign: 'left',
    fontFamily: 'OpenSans-Regular',
    fontSize: 24,
  },
  headerTintColor: 'rgba(255,255,255,0.8)',
  headerBackground: (
    <LinearGradient
      colors={['#4cbdd7', '#3378C3']}
      start={{ x: 0, y: 1 }}
      end={{ x: 1, y: 1 }}
      style={{ flex: 1 }}
    />
  ),
  headerRightContainerStyle: {  
    paddingRight: 10,   
  },    
  headerRight: (    
    <TouchableOpacity onPress={navigation.navigate('storiesList')}> 
      <Ionicons 
         name="ios-search-outline"  
         size={25}  
         color="white"  
         left={20}  
       />   
    </TouchableOpacity>
  )
};

export default StoryHome;

因此，除了TouchableOpacity部分之外，这类工作都是如此。 …

最近我开始使用 React Native0.61.5和 React navigation 5.x。现在我需要将父函数传递给子屏幕。例如，我想通过按下嵌套在 StackNavigator 中的 TabNavigator 选项卡中的按钮来更改导航栏图标。以前（导航版本 3.x）我getActiveChildNavigationOptions用于满足我的需要，但现在它已被删除。所以实现这个目标的唯一方法就是将自定义函数传递给子组件。

在示例代码中，我想从 更改XXXXXXXX为YYYYYYYYY：

const TabA = ({ route }) => (
  <View>
    <Text>Tab A</Text>
      <Button 
        title="Change header"
        onPress={() => route.params.setHeaderRightName("YYYYYYYYY")}/>
  </View>
)

const TabB = () => <><Text>Tab B</Text></>

const Tabs = createBottomTabNavigator();
const TabsNavigator = ({ navigation }) => {
  const [headerRightName, setHeaderRightName] = useState("XXXXXXXX");

  useLayoutEffect(() => navigation.setOptions({
    headerRight: () => <MyNavIcon name={headerRightName}/>
  }), [headerRightName]);

  return (
    <Tabs.Navigator>
      <Tabs.Screen name="tab-a" …