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是您下一个屏幕的名称。

所有这些都在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)

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

反应导航自定义OnClick

1 个答案: