Question

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

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

我在Google上找不到这些解决方案...我也在尝试实现这一点，但我没有做到。

任何人都可以给我一个例子，说明如何实现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>
    )
  }
}

要使用它，请将此代码添加到每个页面中的render函数的开头：

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

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

反应本机导航示例

1 个答案: