Question

我正在学习React Native。我使用带有标签选项的expo init安装了一个初始项目。我一直在玩它，但是我对创建一个按钮并将用户发送到另一个页面这样的简单操作感到有些困惑。

我在Google上看到的所有示例都在使用类

class HomeScreen extends React.Component {}

并在按钮组件内部：

 <Button
      title="Go to Home"
      onPress={() => this.props.navigation.navigate('Home')}
    />

问题是，在首次创建项目的示例中，homeScreen是一个函数

export default function PlayScreen() {
 return (
<View style={styles.container}>
);}

我的问题是我该如何做一个简单的任务？你有什么例子吗？我应该更改原始代码并将其变成一个类吗？你建议我这样做吗？

谢谢

添加要更改的页面代码：

import * as WebBrowser from 'expo-web-browser';
import React from 'react';
import {
  Image,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  FlatList,
  Button,
} from 'react-native';
import TabBarIcon from '../components/TabBarIcon';
import ListItem from "../components/ListItem";
import { MonoText } from '../components/StyledText';

export default function PlayScreen() {
    return (
    <View style={styles.container}>
      <ScrollView
        style={styles.container}
        contentContainerStyle={styles.contentContainer}>
        {/* <View style={styles.welcomeContainer}>
          <Image
            source={
              __DEV__
                ? require('../assets/images/robot-dev.png')
                : require('../assets/images/robot-prod.png')
            }
            style={styles.welcomeImage}
          />
        </View> */}
        <View style={{flex:1, flexDirection:'column', justifyContent:'center'}}>
        <View style={{flexDirection:'row', justifyContent: 'space-between', paddingLeft:15, paddingRight: 15,}}>
          <Button title='Search games' style={styles.w80} onPress={HERE IS WHERE I WANT TO REDIRECT THE USER}></Button>
          {/* <Button title='View Map' style={styles.w80} ></Button> */}
          <TabBarIcon
            focused='false'
            onPress=''
            name={
              Platform.OS === 'ios'
                ? `ios-map`
                : 'md-map'
            }
          />
          </View>
        </View>
        <Text style={[styles.header, styles.contentContainer]}>
          Next games:
        </Text>
        <View style={[ styles.w100, styles.pl20, styles.pr20]}>
          {/* <DevelopmentModeNotice /> */}
          <FlatList style={[styles.w100]}
            data={[{key: '1', venue: 'Lammas Park', date: '22/02/2019', startTime: '20:00', endTime: '21:00', maxPlayers: 10, totalPlayers: 9}, {key: '2', venue: 'Lammas Park', date: '22/02/2019', startTime: '21:00', endTime: '22:00', maxPlayers: 12, totalPlayers: 5}]}
            renderItem={({item}) => 

              <ListItem
              image={item.image}
              id={item.key}
              venue={item.venue}
              date={item.date}
              startTime={item.startTime}
              endTime={item.endTime}
              maxPlayer={item.maxPlayer}
              totalPlayer={item.totalPlayer}
              // onItemPressed={() => props.onItemSelected(item.key)}
            />

                // <View style={[styles.contentContainer,  styles.bgGray]}>
                //   <Text>{item.key} - {item.venue}</Text>
                //   <Text>{item.date} - {item.startTime}: {item.endTime}</Text>
                // </View>
            }
          />

        </View>

        <Text style={[styles.header, styles.contentContainer]}>
          Games Completed:
        </Text>
        <View style={[ styles.w100, styles.pl20, styles.mb30]}>
          {/* <DevelopmentModeNotice /> */}
          <FlatList style={styles.w100}
            data={[
              { key: '1', venue: 'Lammas Park', date: '22/02/2019', startTime: '20:00', endTime: '21:00', maxPlayers: 10, totalPlayers: 9}, 
              {key: '2', venue: 'Lammas Park', date: '22/02/2019', startTime: '21:00', endTime: '22:00', maxPlayers: 12, totalPlayers: 5}, 
              {key: '2', venue: 'Lammas Park', date: '22/02/2019', startTime: '21:00', endTime: '22:00', maxPlayers: 12, totalPlayers: 5}, 
              {key: '2', venue: 'Lammas Park', date: '22/02/2019', startTime: '21:00', endTime: '22:00', maxPlayers: 12, totalPlayers: 5}

            ]}
            renderItem={({item}) => 

                <View style={styles.contentContainer}>
                  <Text>{item.key} - {item.venue}</Text>
                  <Text>{item.date} - {item.startTime}: {item.endTime}</Text>
                </View>
                  }
          />

        </View>



      </ScrollView>


    </View>
  );
}

HomeScreen.navigationOptions = {
  title: 'Home',
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    width: '100%',
    backgroundColor: '#fff',
    fontSize: 15,
    fontWeight: 'bold',
    paddingLeft: 20,
  },
  developmentModeText: {
    marginBottom: 20,
    color: 'rgba(0,0,0,0.4)',
    fontSize: 14,
    lineHeight: 19,
    textAlign: 'center',
  },
  contentContainer: {
    paddingTop: 30,
  },

});

Answer 1

首先，配置stack navigator并将其移动到您离开的页面。

示例

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            this.props.navigation.dispatch(StackActions.reset({
              index: 0,
              actions: [
                NavigationActions.navigate({ routeName: 'Details' })
              ],
            }))
          }}
        />
      </View>
    );
  }  
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      <Button
          title="Go to Home"
          onPress={() => {
            this.props.navigation.dispatch(StackActions.reset({
              index: 0,
              actions: [
                NavigationActions.navigate({ routeName: 'Home' })
              ],
            }))
          }}
        />
      </View>
    );
  }  
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
}, {
    initialRouteName: 'Home',
});

export default createAppContainer(AppNavigator);

React Native导航到另一个页面

1 个答案: