使用导入的按钮在堆栈屏幕之间导航

时间:2020-07-14 10:02:02

标签: javascript reactjs react-native

我是新来的本地人,在建立组件之间的连接时遇到麻烦。

例如 torch.stack(x.split(2), dim=2) # or torch.stack(x.T.split(2, dim=1)) tensor([[[ 0, 3], [ 1, 4], [ 2, 5]], [[ 6, 9], [ 7, 10], [ 8, 11]]]) 不适用于我的模式。我对此主题进行了一些研究,但我无法理解其逻辑。

这是我的App.js

onClickFunction() {this.props.navigation.navigate('CurrencyList')} 

这是我的转换器页面

import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Screens---------------------------------------------------------


// Auth Screens 
import Login from './screens/Authentication/Login'
import Register from './screens/Authentication/Register'


// Main Screens
import Home from './screens/Home'
import Converter from './screens/Converter'
import CurrencyList from './screens/CurrencyList'

//-----------------------------------------------------------------

const Stack = createStackNavigator();

var routeName = 'Converter';



export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName={`${routeName}`}>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Login" component={Login} />
          <Stack.Screen name="Register" component={Register} />
          <Stack.Screen name="Converter" component={Converter} />
          <Stack.Screen name="CurrencyList" component={CurrencyList} />
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

这是我要更改屏幕的按钮组件

// Currency Converter Page

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

// Components

import UpdateButton from '../../components/UpdateButton'
import CurrencySelectButton from '../../components/CurrencySelectButton'
import CurrencyTextInput from '../../components/CurrencyTextInput'
import ConvertedCurrencyTextInput from '../../components/ConvertedCurrencyTextInput'

export default function Home() {
  return (
    <View style={styles.container}>
      
      <View style={styles.textHolder}>
      <CurrencyTextInput />
      <Text>=</Text>
      <ConvertedCurrencyTextInput />
      </View>

      <View style={styles.buttonHolder}>
      <CurrencySelectButton />
      <Text>to</Text>
      <UpdateButton />
      
      </View>
      
      
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonHolder: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f1f1f1',
    alignContent: 'center'
    
  },
  textHolder:{
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f1f1f1',
    alignContent: 'center'
  }
});

1 个答案:

答案 0 :(得分:0)

您必须将导航道具从家里传递到如下所示的按钮

export default function Home({navigation}) {
  return (
    <View style={styles.container}>
      
      <View style={styles.textHolder}>
      <CurrencyTextInput />
      <Text>=</Text>
      <ConvertedCurrencyTextInput navigation={navigation}/>
      </View>

      <View style={styles.buttonHolder}>
      <CurrencySelectButton />
      <Text>to</Text>
      <UpdateButton />
      
      </View>
      
    </View>
  );
}