react native (2) 嵌入h5页面 设置顶部导航

 嵌入h5页面

1.新建好页面

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

2. import { WebView } from 'react-native';

3.<WebView source={{ uri: '要引入的页面路径' }}></WebView>

 

 设置顶部导航

static navigationOptions = {       //导航栏标题 　 　headerTitle: ( 　　　　<Text>今日考勤展示</Text> 　　 ), 　　//返回按钮标题 　　 headerBackTitle:"返回" ,

　　// 导航条左侧
　　headerLeft: (
　　    <TouchableOpacity onPress={() =>{this.props.navigation.goBack();}}>
              <Image style={{marginLeft:20, width:30, height:30}} source={require("../../Resources/leftBack.png")} resizeMode='center'></Image>
          </TouchableOpacity>
      ),

　　// 导航条右侧       headerRight: ( 　　　　<Button title="Info" color="red" onPress={() => {this.props.navigation.navigate('Details')}}/> 　　) }

 

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄