React-navigation custom OnClick

Question

私は、クリックしたときにユーザーをナビゲートし、反応ナビゲーションライブラリを使用している画面の中央にボタンを作ろうとしています。 stackNavigator、HeaderNavigator、またはDrawerNavigatorを使わないで、どうすればいいですか？

import React, { Component } from 'react'; 
import { Text } from 'react-native'; 
import { Button } from 'react-native-elements'; 

    export default class LoginButton extends Component { 
     onPressButton() { 
     console.log('pressed'); 
     } 
     render() { 
     return (
       <Button 
       title='LOG IN' 
       buttonStyle={styles.loginButton} 
       onPress= ## how do i do it? 
       /> 
     ); 
     } 
    } 

    const styles = { 

     loginButton: { 
     width: 290, 
     height: 50, 
     backgroundColor: '#A91515', 
     alignItems: 'center', 
     borderRadius: 4, 
     marginTop: 35, 
     marginLeft: 49, 
     justifyContent: 'space-around' 
     } 
    }; 

Answer 1

私はStackNavigatorを使用しましたが、他は使用しませんでした。この回答はStackNavigatorのみです。まず、ルータが必要です。

export const AppNavigator = StackNavigator({ 
    Home: { screen: Home }, 
    NextPage: { screen: NextPage} 
}) 

次はあなたがHomeとNext Pageのビューを必要とします。クラス名がルータのscreenの値と同じであることを確認してください。次に、index.ios/android.jsのAppRegistryにAppRegistry.registerComponent('Appname',() => AppNavigator)と入力します。 AppNavigatorはあなたのStackNavigatorの名前です。

次に、上記のコードに戻ります。 render()以下には、const { navigate } = this.props.navigationと入力します。

最後に、onPressプロパティ内に、navigate('NextPage')を追加します。 NextPageは、次の画面の名前です。

これらはすべて反応ナビゲーションのドキュメントにあります。私の答えがどのように機能するかを理解するために、それを読む時間を取る。

https://reactnavigation.org/docs/intro/

は、この情報がお役に立てば幸い！

決勝コード：

import { StackNavigator } from 'react-navigation' 
import React, { Component } from 'react' 
import { AppRegistry, View, Text, Button } from 'react-native' 

const AppNavigator = StackNavigator({ 
    Home: { screen: Home }, 
    NextPage: { screen: NextPage } 
}) 

export default class Home extends Component{ 
    render(){ 
     const { navigate } = this.props.navigation 
     return(
     <View> 
      <Text>Homepage</Text> 
      <Button title='NextPage' onPress={navigate('NextPage')}></Button> 
     </View> 
    ) 
    } 
} 

export default class NextPage extends Component{ 
    render(){ 
     return(
     <View> 
      <Text>NextPage</Text> 
     </View> 
    ) 
    } 
} 

AppRegistry.registerComponent('AppName',() => AppNavigator) 

私は本当にこれを実行していないので、これは正確ではないかもしれません。