0

我正在尝试在屏幕中间制作一个按钮，单击该按钮将导航用户，并且我正在使用 react-navigation 库。如果没有 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'
      }
    };
4

1 回答 1

0

我使用了 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是下一个屏幕的名称。

所有这些都在 react-navigation 的文档中。花点时间阅读它以了解我上面的答案是如何工作的。

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)

这可能不准确，因为我还没有真正执行过这个。

于 2017-07-25T10:49:21.323 回答