Question

我是一位使用Android Studio最多的Android开发人员。我从我的第一个iOS原生项目开始，我想知道如何在一个屏幕上显示一个带有按钮的按钮，当用户单击该按钮时，他会转到另一个屏幕（或以Android方式进行的活动）并显示一个问候消息。我真的很乐意提供帮助，因为我对React和React-Native真的很陌生。

我尝试了以下代码，但得到了以下error。我的代码如下：

    import React, { Component } from 'react';    
    import { StyleSheet, Text, View, Image, Button } from 'react-native';
    import { createStackNavigator } from 'react-navigation';
    import Settings from './Settings';
    import Home from './Home';

    const AppNavigator = createStackNavigator({
    HomeScreen: { screen: Home },
    SettingScreen: { screen: Settings },
    });

    export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.image} source={require('./assets/adc.png')} />
        <Text style={styles.adc}>Aratos Disaster Control</Text>
        <Button title="Settings" onPress = {() => this.props.navigation.navigate('SettingScreen')} />
      </View> 
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  adc:{
    fontWeight: 'bold',
    marginTop: 20
  },
  image:{
    width: 80,
    height: 100
  }
});


   // Home.js

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

export class Home extends Component {

  render() {
    return (
      <View>
        <Text>This is the home screen</Text>
        <Button title="Settings" onPress={() => this.props.navigation.navigate('SettingScreen')} />
      </View>
    )
  }
}

export default Home


// Settings.js
    import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export class Settings extends Component {


  render() {

    return (
      <View>
        <Text>This is the Settings screen</Text>
      </View>
    )
  }
};

export default Settings;

Answer 1

要在页面之间导航，可以使用React Navigation或react-native-router-flux或其他软件包。您必须定义导航的结构，然后使用此软件包导航到每个页面。阅读指南以获取更多信息。

React native打开活动

1 个答案: