带有Netwoking和Sceenchooser的本机路由器通量

Question

我有问题。我的应用程序现在可以工作，但不像我想要的那样。

App.js

export default class App extends Component {
constructor(props) {
super(props);
this.state = {
  data: [],
  isLoading: true,

  };
}

componentDidMount() {
fetch('https://reactnative.dev/movies.json')
  .then((response) => response.json())
  .then((json) => {
    this.setState({ data: json.movies });
  })
  .catch((error) => console.error(error))
  .finally(() => {
    this.setState({ isLoading: false });
  });
}

render() {
const { data, isLoading } = this.state;
const goToPageTwo = () => Actions.sw({text: 'Hello World!'});
return (
  <View style={{ flex: 1, padding: 24 }}>
    {isLoading ? <ActivityIndicator/> : (
      <FlatList
        data={data}
        keyExtractor={({ id }, index) => id}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => { Actions.hp({text: item.id})  }}>
            <Text>{item.title}</Text>
          </TouchableOpacity>

        )}
      />
    )}
  </View>
  );
 }
};

在我的情况下为index.js / Route.js sm.js

import app from './App';
import sw from './StarWars'
import bttf from './BacktotheFuture'
import hP from './handlePage';
import tM from './theMatrix';
import iN from './Inception';

const SceneManager = () => (
<Router>
    <Scene>
    <Scene key='home'
                component={app}
                title='BTour'
                initial
                />
    <Scene key='sw'
                component={sw}
                title='star wars'

                />
    <Scene key='hp'
                component={hP}
                title='BTour'

                />
    <Scene key='bttf'
                component={bttf}
                title='Back to the future'

                />
    <Scene key='tM'
                component={tM}
                title='MAtrix'

                />
    <Scene key='iN'
                component={iN}
                title='Inception'

                />

       </Scene>
    </Router>
 )
     export default SceneManager;

和我的Handlepage.js

import StarWars from './StarWars';
import BTTF from './BacktotheFuture';
import TM from './theMatrix';
import IN from './Inception';

export default class handlePage extends Component {
renderElement() {
  if(this.props.text ==1) {
      return <StarWars/>
  }
  if (this.props.text ==2) {
      return <BTTF/>
  }
  if (this.props.text ==3) {
    return <TM/>
  }
  if(this.props.text == 4) {
    return <IN/>
  }
  return null;
}
render(){
  return(
    this.renderElement()
  )
}
};

现在我的问题：我想使用我在Router类中定义的场景。例如，当我按下主屏幕上的第一个按钮时，将打开“星球大战”，但不会打开我在路由类中编写的组件。

我可以将组件场景从Route.js移到If-Statemant中的HandlePage.js，还是可以将If Statemant放在Router类中。

现在，只有IF语句中的脚本将打开。

Answer 1

我认为没有必要将handlePage定义为类，您只需声明一个函数即可根据item.id导航到您的场景>

Handlepage.js

import { Actions } from 'react-native-router-flux';

export const navigateByItemId = (id) => {
  switch (id) {
    case 1:
      Actions.jump('sw');
      break;
    case 2:
      Actions.jump('bttf');
      break;
    case 3:
      Actions.jump('tM');
      break;
    default:
      Actions.jump('iN');
  }
};
并且在App.js中，您可以调用此实用程序功能来决定导航到的位置

import { navigateByItemId } from './Handlepage';

...

     <TouchableOpacity onPress={() => { navigateByItemId(item.id) }}>
          <Text>{item.title}</Text>
     </TouchableOpacity>
您可以在路由器中删除handlePage声明：

    <Scene key='hp' //you can delete this code
                component={hP}
                title='BTour'
                />