javascript - 在具有两个单独的 react native 文件的屏幕之间导航

Question

我是 React Native 的新手，我想在屏幕之间导航。我有两个示例文件

#App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Home from './src/Home';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Home/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFEB3B',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

和另一个文件

#Home.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';

export default class Home extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>User</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Contractor</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    fontSize:16,
    fontWeight:'500',
    color:'#212121',
    textAlign:'center'
  },
  button: {
    width:300,
    borderRadius: 25,
    backgroundColor:'#FCE4EC',
    marginVertical: 10,
    paddingVertical:16

  }
});

我如何做到当在 Home.js 文件中单击用户或承包商时，他们会将我带到不同的屏幕，最好使用 stacknavigator。我尝试了文档，但似乎无法找到前进的方向。

Answer 1

您可以使用 StackNavigator 轻松完成此操作由 react-navigation library 提供.

思路如下:在 App.js 文件中，您必须引用导航的 stacknavigator/parent。

#App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Home from './src/Home';
import Contractor from './src/Contractor';
import User from './src/User';

const Main = StackNavigator({
  HomeScreen: {
    screen: Home
  },
  UserScreen: {
    screen: User,
  },
  ContractorScreen: {
    screen: Contractor,
  },
}

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Main/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFEB3B',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

主页文件:

#Home.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';

export default class Home extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} 
        onPress={() => this.props.navigation.navigate({ routeName: 'UserScreen'})}>
          <Text style={styles.buttonText}>User</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}
        onPress={() => this.props.navigation.navigate({ routeName: 'ContractorScreen'})}>
          <Text style={styles.buttonText}>Contractor</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    fontSize:16,
    fontWeight:'500',
    color:'#212121',
    textAlign:'center'
  },
  button: {
    width:300,
    borderRadius: 25,
    backgroundColor:'#FCE4EC',
    marginVertical: 10,
    paddingVertical:16

  }
});

用户文件:

#User.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';

export default class User extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>I am the User screen</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize:16,
    fontWeight:'500',
    color:'#212121',
    textAlign:'center'
});

最后，承包商文件:

#Contractor.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';

export default class Contractor extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>I am the Contractor screen</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize:16,
    fontWeight:'500',
    color:'#212121',
    textAlign:'center'
});