Навигация между экранами в реагировать на родной

Question

Поэтому я пытаюсь перемещаться между двумя экранами. Я создал кнопку на панели вкладок (справа), но проблема в том, что она всегда говорит, что она не определена. Вот код:

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

с использованием базового API-компонента response-navigation v5:

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>
  );
}

или со старым API-интерфейсом v4:

// 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 prop, состоящий из вспомогательные функции для навигации. Некоторые часто используемые *

1. naviagtion.navigate("screenName") // переход на новый экран
2. navigation.goBack() // go возврат к предыдущему экрану
3. navigation.push("screen name") // переход на новый экран с анимацией стека. это работает только для stackNavigator
4. navigation.pop() // переход к предыдущему экрану с анимацией стека. это работает только для stackNavigator

Answer 2

Вы можете использовать response-native-router-flux (npm установить --save реагировать-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 />
    );
  }
}

теперь в вашем логине. js когда вы нажимаете на кнопку входа в систему, напишите это:

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

  onLoginClick() {
    Actions.feedscreen();
  }

Вот и все .. счастливое кодирование.

Answer 3

Глядя на https://reactnavigation.org/docs/4.x/redux-integration/#setparams -из вашего экрана , вероятно, вы должны сделать:

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 внутри свойства или метода stati c будет ссылаться на сам класс, а не на экземпляр компонента.