Question

我是新手以反应原生，我想在屏幕之间导航。我有两个示例文件

#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'
});

快乐编码：）

在具有两个单独的反应本机文件的屏幕之间导航

1 个答案: