反应原生导航示例

Question

我想在这些屏幕之间实现导航；

我想要 5 个屏幕； 1是登录屏幕（用户打开应用程序时的第一个屏幕） 2 是主屏幕，其中有 2 个底部标签...这两个标签中的每一个都有特定的标题。 3&4 是其他一些画面

我在谷歌上没有找到任何解决方案……我也试图实现这一点，但我没能做到。

谁能给我举例说明如何实现stacknavigator和createbottomnavigation。

Answer 1

在 index.js 中，您可以像这样使用反应导航定义导航结构：

import Profile from './../views/Profile';
import Home from './../views/Home';
import Login from './../views/Login'
import Splash from './../views/SplashScreen'

    const Routes = createStackNavigator({
        Splash: { screen: Splash },
        Login: { screen: Login },
        Main: {
            screen: createBottomTabNavigator({
                Home: { screen: Home},
                Profile: { screen: Profile },
            }, {initialRouteName:Home})
        }
    },{ initialRouteName: Splash});

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

    render() {
        return (
            <Routes />
        )
    }
}

每个视图都可以是这样的堆栈导航器：

const homeStack = createStackNavigator({
    screen1: { screen: screen1},
    screen2: { screen: screen2},
},{ initialRouteName: screen1});

const Routes = createStackNavigator({
       Splash: { screen: Splash },
       Login: { screen: Login },
       Main: {
           screen: createBottomTabNavigator({
                Home: { screen: homeStack},
                Profile: { screen: Profile },
           }, {initialRouteName:Home})
      }
},{ initialRouteName: Splash});

您也可以阅读react navigation docs。希望对您有所帮助。

编辑

要制作自定义标题，您可以制作如下内容：

export default class Header extends React.PureComponent {

  constructor(props, context) {
    super(props)
    this.state = {
      height: 80,
      renderItemLeft: props.renderItemLeft,
    }
  }

  componentWillReceiveProps(nextProps: any) {
    if (nextProps.renderItemLeft != this.state.renderItemLeft) {
      this.setState({ renderItemLeft: nextProps.renderItemLeft })
    }
  }

  renderTitle = () => {
    if (this.props.title) {
      return (
        <View style={{ flexDirection: 'column', flex: 3, justifyContent: 'center' }}>
          <View style={{ alignSelf: 'flex-start' }}>
            <Text style={{ fontSize:17, color: 'white' }]}>{this.props.title}</Text>
          </View>
        </View>
      )
    }
  }

  renderBack = () => {
    if (this.props.back) {
      return (
        <View style={{ marginTop: 3 }}>
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.goBack()
            }}
            style={{ alignSelf: 'flex-start' }}>
            <Icon name="md-arrow-forward" size={23} color="black" />
          </TouchableOpacity>
        </View>
      )
    }
  }

  render() {
    return (
      <View style={[{
        height: this.state.height, backgroundColor: this.props.backgroundColor, width: '100%'}]}>
        <View style={{ flex: 1, flexDirection: 'row', marginTop: Platform.OS == 'ios' ? 17 : 3 }}>
          {/* right side */}
          <View style={{ flexDirection: 'column', flex: 1, justifyContent: 'center', marginLeft: 12 }}>
            {this.renderBack()}
            {this.renderTitle()}
          </View>

          {/* left side */}
          <View style={{ flex: 1, justifyContent: 'flex-start' }}>
            {this.state.renderItemLeft ? this.state.renderItemLeft : null}
          </View>

        </View>
      </View>
    )
  }
}

为了使用它，将此代码添加到每个页面的渲染函数的开头：

<Header
    back={false}
    showBorder={true}
    backgroundColor={'green'}
    title={'profile'}
    renderItemLeft ={<View> <Text>left button!</Text> </View>}
/>

请注意，这只是一个示例代码，可能需要进行一些更改才能正常工作。