Question

因此，我尝试在2个屏幕之间导航。我在标签栏上创建了一个按钮（右）但是问题在于它总是说未定义。这是代码：

static navigationOptions = {

    headerTitleStyle: { alignSelf: 'center', },
    title:'Oferte',
    headerStyle: {
      backgroundColor: '#BA272A',
    },
    headerRight: (

     <View style={{paddingRight:11}}>
       <Button
        color="#ff5c5c" title="Tombola"
        onPress={() => this.props.navigation( 'Post', { name: 'Jane'} )}
       />
    </View> 
    ),
    headerTintColor: 'white',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }

Answer 1

看https://reactnavigation.org/docs/4.x/redux-integration/#setparams-from-your-screen，也许你应该这样做：

static navigationOptions = ({navigation}) => ({

headerTitleStyle: { alignSelf: 'center', },
title:'Oferte',
headerStyle: {
  backgroundColor: '#BA272A',
},
headerRight: (

 <View style={{paddingRight:11}}>
   <Button
    color="#ff5c5c" title="Tombola"
    onPress={() => navigation( 'Post', { name: 'Jane'} )}
   />
</View> 
),
headerTintColor: 'white',
headerTitleStyle: {
  fontWeight: 'bold',
},
}}

在静态属性或方法中使用this时，它将引用类本身而不是组件实例。

Answer 2

使用react-navigation v5组件基本api：

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
     <Button title="navigate" onPress={()=> props.navigate("home")} />
    </View>
  );
}

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
 <Button title="navigate" onPress={()=> props.navigate("details")} />
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

或使用旧的v4 api：

// Other code for HomeScreen here...


class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

// Other code for App component here...

在这些组件中，您可以评估navigation属性，该属性由用于导航的辅助功能组成。一些常用的功能是

naviagtion.navigate("screenName") //导航到新屏幕
navigation.goBack() //返回上一屏幕
navigation.push("screen name") //导航到带有堆栈动画的新屏幕。这仅适用于stackNavigator
navigation.pop() //导航到带有堆栈动画的上一个屏幕。这仅适用于stackNavigator

Answer 3

您可以使用react-native-router-flux（npm install --save react-native-router-flux）

只需制作一个Navigator.js文件并定义要导航的每个页面。

import React from 'react';
import { Router, Scene } from 'react-native-router-flux';

import LaunchScreen from '../components/LaunchScreen.js';
import Feed from '../components/Feed.js';


const Navigator = () => {
  return (
    <Router>
      <Scene key="root">
        <Scene key="lauchscreen" component={LaunchScreen} hideNavBar initial /> 
        <Scene key="feedscreen" type="reset" hideNavBar component={Feed} />
      </Scene>
    </Router>
  );
};

export default Navigator;
now in your App.js file add this:

import Navigator from './src/Navigator.js';

export default class App extends Component<Props> {
render() {
    return (
          <Navigator />
    );
  }
}

现在，当您单击登录按钮时，在您的login.js中输入以下内容：

import { Actions } from 'react-native-router-flux';

  onLoginClick() {
    Actions.feedscreen();
  }

就这样了。编码愉快。

在React Native中在屏幕之间导航

3 个答案: