带有网络和 Sceenchooser 的 React-Native Router Flux

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()
  )
}
};

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

我可以将 Route.js 中的组件场景带到 If-Statemant 中的 HandlePage.js，或者我可以将 If Statemant 放在路由器类中吗？

现在只有 IF-Statemant 中的脚本会打开。

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'
                />