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

嵌入h5页面

1.新建好页面

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

　　)

}