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

时间:2022-08-03 18:40:56

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