Fatal编程技术网

Javascript 按图像导航

javascript reactjs react-native

Javascript 按图像导航,javascript,reactjs,react-native,react-navigation,Javascript,Reactjs,React Native,React Navigation,我试图通过按下SearchScreen.js上的特定图像来浏览屏幕。每个图像都会导致不同的屏幕。我目前正在尝试从第一张图像导航到屏幕meo_sw.js。然而，我不能这样做，我不明白为什么。以下是SearchScreen.js的代码： import React from 'react'; import { ScrollView, StyleSheet, TextInput, Text, View, Image, TouchableOpacity, TouchableWithoutFeedback}

我试图通过按下
SearchScreen.js
上的特定图像来浏览屏幕。每个图像都会导致不同的屏幕。我目前正在尝试从第一张图像导航到屏幕
meo_sw.js
。然而，我不能这样做，我不明白为什么。以下是
SearchScreen.js
的代码：

import React from 'react';
import { ScrollView, StyleSheet, TextInput, Text, View, Image, TouchableOpacity, TouchableWithoutFeedback} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

function SearchScreen() {

 return (
<View style={styles.screen}>
  <View style={styles.container}>
    <TextInput style={styles.inputBox}
              underlineColorAndroid='rgba(0,0,0,0)' 
              placeholder="Procura aqui"
              placeholderTextColor = "black"
              selectionColor="black"
              keyboardType="default"/>
  </View>
  <View style={styles.teste}> 
    <Text style={styles.festivais}>Recomendados</Text>
    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
      <TouchableOpacity onPress={() => navigate('meo_sw')}>
        <Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('vodaf_coura')}>
        <Image source={require('../assets/images/vodafone_coura.png')} style={styles.image} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('superR_superB')}>
        <Image source={require('../assets/images/superbock_superrock.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('nos_primavera')}>
        <Image source={require('../assets/images/nos_primavera.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('rock_in_rio')}>
        <Image source={require('../assets/images/rock_in_rio.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('edp_cool_jazz')}>
        <Image source={require('../assets/images/edp_cooljazz.png')} style={styles.image}/>
      </TouchableOpacity>
    </ScrollView>
  </View>
</View>
);
}

SearchScreen.navigationOptions = {
  title: 'Procurar',
};

const styles = StyleSheet.create({
 //I took this off because it's irrelevant for the question itself
});

export default SearchScreen;

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import SearchScreen from '../screens/SearchScreen';
import SettingsScreen from '../screens/SettingsScreen';
import ChatScreen from '../screens/ChatScreen';
import CalendarScreen from '../screens/CalendarScreen';
import meo_sw from '../Eventos/Festivais/meo_sw';

const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
});

//Home

const HomeStack = createStackNavigator(
  {
HomeScreen: {screen: HomeScreen},
SearchScreen: {screen: SearchScreen},
ChatScreen: {screen: ChatScreen},
SettingsScreen: {screen: SettingsScreen},
CalendarScreen: {screen: CalendarScreen},
  },
  config
);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : '-outline'}`
          : 'md-home'
      }
    />
  ),
};

HomeStack.path = '';

//Search

const SearchStack = createStackNavigator(
  {
    Search: SearchScreen,
  },
  config
);

SearchStack.navigationOptions = {
  tabBarLabel: 'Procurar',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-search' : 'md-search'} />
  ),
};

SearchStack.path = '';

//Chat

const ChatStack = createStackNavigator(
  {
    Chat: ChatScreen,
  },
  config
);

ChatStack.navigationOptions = {
  tabBarLabel: 'Chat',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-chatboxes${focused ? '' : '-outline'}`
          : 'md-chatboxes'
      }
    />
  ),
};

ChatStack.path = '';


//Settings

const SettingsStack = createStackNavigator(
  {
    Settings: SettingsScreen,
  },
  config
);

SettingsStack.navigationOptions = {
  tabBarLabel: 'Perfil',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-person' : 'md-person'} />
  ),
};

SettingsStack.path = '';

//Calendar

const CalendarStack = createStackNavigator(
  {
    Calendar: CalendarScreen,
  },
  config
);

 CalendarStack.navigationOptions = {
  tabBarLabel: 'Calendário',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-calendar' : 'md-calendar'} />
  ),
};

CalendarStack.path = '';

//Bottom tab navigator

const tabNavigator = createBottomTabNavigator({
  SearchStack,
  CalendarStack,
  HomeStack,
  ChatStack,
  SettingsStack
});

tabNavigator.path = '';


export default tabNavigator;

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';

export default createAppContainer(
  createSwitchNavigator({
    Main: MainTabNavigator,
  })
);
这是AppNavigator.js：

import React from 'react';
import { ScrollView, StyleSheet, TextInput, Text, View, Image, TouchableOpacity, TouchableWithoutFeedback} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

function SearchScreen() {

 return (
<View style={styles.screen}>
  <View style={styles.container}>
    <TextInput style={styles.inputBox}
              underlineColorAndroid='rgba(0,0,0,0)' 
              placeholder="Procura aqui"
              placeholderTextColor = "black"
              selectionColor="black"
              keyboardType="default"/>
  </View>
  <View style={styles.teste}> 
    <Text style={styles.festivais}>Recomendados</Text>
    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
      <TouchableOpacity onPress={() => navigate('meo_sw')}>
        <Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('vodaf_coura')}>
        <Image source={require('../assets/images/vodafone_coura.png')} style={styles.image} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('superR_superB')}>
        <Image source={require('../assets/images/superbock_superrock.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('nos_primavera')}>
        <Image source={require('../assets/images/nos_primavera.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('rock_in_rio')}>
        <Image source={require('../assets/images/rock_in_rio.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('edp_cool_jazz')}>
        <Image source={require('../assets/images/edp_cooljazz.png')} style={styles.image}/>
      </TouchableOpacity>
    </ScrollView>
  </View>
</View>
);
}

SearchScreen.navigationOptions = {
  title: 'Procurar',
};

const styles = StyleSheet.create({
 //I took this off because it's irrelevant for the question itself
});

export default SearchScreen;

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import SearchScreen from '../screens/SearchScreen';
import SettingsScreen from '../screens/SettingsScreen';
import ChatScreen from '../screens/ChatScreen';
import CalendarScreen from '../screens/CalendarScreen';
import meo_sw from '../Eventos/Festivais/meo_sw';

const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
});

//Home

const HomeStack = createStackNavigator(
  {
HomeScreen: {screen: HomeScreen},
SearchScreen: {screen: SearchScreen},
ChatScreen: {screen: ChatScreen},
SettingsScreen: {screen: SettingsScreen},
CalendarScreen: {screen: CalendarScreen},
  },
  config
);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : '-outline'}`
          : 'md-home'
      }
    />
  ),
};

HomeStack.path = '';

//Search

const SearchStack = createStackNavigator(
  {
    Search: SearchScreen,
  },
  config
);

SearchStack.navigationOptions = {
  tabBarLabel: 'Procurar',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-search' : 'md-search'} />
  ),
};

SearchStack.path = '';

//Chat

const ChatStack = createStackNavigator(
  {
    Chat: ChatScreen,
  },
  config
);

ChatStack.navigationOptions = {
  tabBarLabel: 'Chat',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-chatboxes${focused ? '' : '-outline'}`
          : 'md-chatboxes'
      }
    />
  ),
};

ChatStack.path = '';


//Settings

const SettingsStack = createStackNavigator(
  {
    Settings: SettingsScreen,
  },
  config
);

SettingsStack.navigationOptions = {
  tabBarLabel: 'Perfil',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-person' : 'md-person'} />
  ),
};

SettingsStack.path = '';

//Calendar

const CalendarStack = createStackNavigator(
  {
    Calendar: CalendarScreen,
  },
  config
);

 CalendarStack.navigationOptions = {
  tabBarLabel: 'Calendário',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-calendar' : 'md-calendar'} />
  ),
};

CalendarStack.path = '';

//Bottom tab navigator

const tabNavigator = createBottomTabNavigator({
  SearchStack,
  CalendarStack,
  HomeStack,
  ChatStack,
  SettingsStack
});

tabNavigator.path = '';


export default tabNavigator;

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';

export default createAppContainer(
  createSwitchNavigator({
    Main: MainTabNavigator,
  })
);
您的函数无法获取道具，因此无法导入导航属性！！ 将函数更改为类，在类中获取道具，然后尝试导航。 尝试此代码

export default class SearchScreen extends Component {
        constructor(props) {
            super(props);
            this.state = {    }
              }

  return (
<View style={styles.screen}>
  <View style={styles.container}>
    <TextInput style={styles.inputBox}
              underlineColorAndroid='rgba(0,0,0,0)' 
              placeholder="Procura aqui"
              placeholderTextColor = "black"
              selectionColor="black"
              keyboardType="default"/>
  </View>
  <View style={styles.teste}> 
    <Text style={styles.festivais}>Recomendados</Text>
    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('meo_sw')}>
        <Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('vodaf_coura')}>
        <Image source={require('../assets/images/vodafone_coura.png')} style={styles.image} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('superR_superB')}>
        <Image source={require('../assets/images/superbock_superrock.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('nos_primavera')}>
        <Image source={require('../assets/images/nos_primavera.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('rock_in_rio')}>
        <Image source={require('../assets/images/rock_in_rio.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('edp_cool_jazz')}>
        <Image source={require('../assets/images/edp_cooljazz.png')} style={styles.image}/>
      </TouchableOpacity>
    </ScrollView>
  </View>
</View>
);
}

导出默认类SearchScreen扩展组件{
建造师（道具）{
超级（道具）；
this.state={}
}
返回(
推荐
this.props.navigation.navigate（'meo_sw'）}>
this.props.navigation.navigate（'vodaf\u coura'）}>
this.props.navigation.navigate（'superR\u superB'）}>
this.props.navigation.navigate（'nos_primavera'）}>
this.props.navigation.navigate（'rock_in_rio'）}>
this.props.navigation.navigate（'edp\u cool\u jazz'）}>
);
}
希望对您有所帮助，请放心。

您的功能无法获取道具，因此无法导入导航属性！！ 将函数更改为类，在类中获取道具，然后尝试导航。 尝试此代码

export default class SearchScreen extends Component {
        constructor(props) {
            super(props);
            this.state = {    }
              }

  return (
<View style={styles.screen}>
  <View style={styles.container}>
    <TextInput style={styles.inputBox}
              underlineColorAndroid='rgba(0,0,0,0)' 
              placeholder="Procura aqui"
              placeholderTextColor = "black"
              selectionColor="black"
              keyboardType="default"/>
  </View>
  <View style={styles.teste}> 
    <Text style={styles.festivais}>Recomendados</Text>
    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('meo_sw')}>
        <Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('vodaf_coura')}>
        <Image source={require('../assets/images/vodafone_coura.png')} style={styles.image} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('superR_superB')}>
        <Image source={require('../assets/images/superbock_superrock.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('nos_primavera')}>
        <Image source={require('../assets/images/nos_primavera.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('rock_in_rio')}>
        <Image source={require('../assets/images/rock_in_rio.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('edp_cool_jazz')}>
        <Image source={require('../assets/images/edp_cooljazz.png')} style={styles.image}/>
      </TouchableOpacity>
    </ScrollView>
  </View>
</View>
);
}

导出默认类SearchScreen扩展组件{
建造师（道具）{
超级（道具）；
this.state={}
}
返回(
推荐
this.props.navigation.navigate（'meo_sw'）}>
this.props.navigation.navigate（'vodaf\u coura'）}>
this.props.navigation.navigate（'superR\u superB'）}>
this.props.navigation.navigate（'nos_primavera'）}>
this.props.navigation.navigate（'rock_in_rio'）}>
this.props.navigation.navigate（'edp\u cool\u jazz'）}>
);
}
希望有帮助，请不要怀疑。

将导航对象作为道具传递

function SearchScreen({ navigation }) {
 ....
}
他们喜欢用它

<TouchableOpacity onPress={() => navigation.navigate('meo_sw')}>
  <Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image}/>
</TouchableOpacity>

navigation.navigate（'meo_sw'）}>
将屏幕添加到其中一个导航器，如下所示

const HomeStack = createStackNavigator(
  {
    HomeScreen: { screen: HomeScreen },
    SearchScreen: { screen: SearchScreen },
    ChatScreen: { screen: ChatScreen },
    SettingsScreen: { screen: SettingsScreen },
    CalendarScreen: { screen: CalendarScreen },
    meo_sw: { screen: meo_sw}
  },
  config
);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : '-outline'}`
          : 'md-home'
      }
    />
  ),
};

const HomeStack=createStackNavigator(
{
主屏幕：{屏幕：主屏幕}，
SearchScreen:{screen:SearchScreen}，
ChatScreen:{screen:ChatScreen}，
SettingsScreen:{screen:SettingsScreen}，
CalendarScreen:{screen:CalendarScreen}，
meo_sw:{屏幕：meo_sw}
},
配置
);
HomeStack.navigationOptions={
tabBarLabel:“主页”，
tabBarIcon:（{focused}）=>(
),
};
将导航对象作为道具传递

function SearchScreen({ navigation }) {
 ....
}
他们喜欢用它

<TouchableOpacity onPress={() => navigation.navigate('meo_sw')}>
  <Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image}/>
</TouchableOpacity>

navigation.navigate（'meo_sw'）}>
将屏幕添加到其中一个导航器，如下所示

const HomeStack = createStackNavigator(
  {
    HomeScreen: { screen: HomeScreen },
    SearchScreen: { screen: SearchScreen },
    ChatScreen: { screen: ChatScreen },
    SettingsScreen: { screen: SettingsScreen },
    CalendarScreen: { screen: CalendarScreen },
    meo_sw: { screen: meo_sw}
  },
  config
);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : '-outline'}`
          : 'md-home'
      }
    />
  ),
};

const HomeStack=createStackNavigator(
{
主屏幕：{屏幕：主屏幕}，
SearchScreen:{screen:SearchScreen}，
ChatScreen:{screen:ChatScreen}，
SettingsScreen:{screen:SettingsScreen}，
CalendarScreen:{screen:CalendarScreen}，
meo_sw:{屏幕：meo_sw}
},
配置
);
HomeStack.navigationOptions={
tabBarLabel:“主页”，
tabBarIcon:（{focused}）=>(
),
};

你能更新错误截图吗？我用截图更新了问题尝试this.props.navigation.push（'vodaf\u coura'）}我替换了它，但现在错误是“TypeError:undefined不是对象（评估'\u this.props'）在函数**函数搜索屏幕（{navigation}）中传递props”**你能更新错误的截图吗？我用截图更新了问题的截图尝试this.props.navigation.push（'vodaf_coura'）}我替换了它，但现在错误是“TypeError:undefined不是对象（评估'\u this.props'）在函数**函数搜索屏幕（{navigation}）**因为我们可以在类中创建很多函数，你们为什么喜欢使用函数？对不起，我没听懂你们的意思，你们能解释一下什么是OP吗？你们是如何把它和函数联系起来的，现在还很困惑，请解释一下。因为我们可以在课堂上创建很多函数，你们为什么喜欢使用函数？对不起，我没听懂你们的意思，你能解释一下什么是OP吗？你是如何将它与仍然混乱的函数联系起来的，请解释。我尝试过这个方法，但现在当我点击图像时，它不再返回错误，而是什么都没有发生。你有名为
meo_sw
的屏幕吗？请共享您的导航代码。它什么也不做，因为屏幕不存在，屏幕确实存在，它被称为“meo_sw.js”。代码写在问题中。我更新了问题。然后AppNavigator.js被导入到App.js中。我尝试了这个方法，但现在当我点击图像时，它不再返回错误，而是什么也没有发生。您有名为
meo_sw
的屏幕吗？请共享您的导航代码。它什么也不做，因为屏幕不存在，屏幕确实存在，它被称为“meo_sw.js”。代码写在问题中。我更新了问题。然后将AppNavigator.js导入App.js