React native 如何使带有背景图像的按钮重定向到WebView

我有问题，使按钮与背景图像，然后重定向到我的WebView反应本机

我已经运行了代码来显示我的web视图，我想在我的web视图显示之前，它是由按钮点击触发的，看起来像这样

下面是我的网络视图的代码

import React, { Component } from 'react'  
import {  

View,StyleSheet,AppRegistry  
} from 'react-native'  
import {WebView} from 'react-native-webview'  

export default class ActivityIndicatorDemo extends Component {  
    render() {  
        return (  
            <View style = {styles.container}>  
                {/*<WebView 
                    source={{html: '<h1>Hello javaTpoint</h1>'}} 
                />*/}  
             {/*   <WebView 
                    source={require("./resources/index.html")} 
                />*/}  
                <WebView  
                    // injectedJavaScript={false}
                    // javaScriptEnabled={false}
                    // originWhitelist={['*']}
                    source = {{ uri:'http://myip/login' }}  
                />  
            </View>  
        )  
    }  
}  
const styles = StyleSheet.create({  
    container: {  
        justifyContent: 'center',
        flexDirection: 'column',
        flex: 1,  
    }  
})  

AppRegistry.registerComponent('App', () => ActivityIndicatorDemo)

import React，{Component}来自“React”
导入{
视图、样式表、AppRegistry
}从“反应本机”
从“react native WebView”导入{WebView}
导出默认类ActivityIndicatorDemo扩展组件{
render（）{
报税表（
{/**/}  
{/*   */}  
)  
}  
}  
constyles=StyleSheet.create（{
容器：{
为内容辩护：“中心”，
flexDirection:'列'，
弹性：1，
}  
})  
AppRegistry.registerComponent（'App'，（）=>ActivityIndicatorDemo）

---

如何在WebView显示之前使用背景图像实现按钮？

下面是一个简单的方法

    import React, {useState} from 'react';
import {
  View,
  ImageBackground,
  TouchableOpacity,
  Text,
  StatusBar,
} from 'react-native';

import WebView from "react-native-webview";
const App = () => {
  const [visible, showWebview] = useState(false)

  const setVisible = (visible) => {
    showWebview(visible);
  }
  return (
    <View
    style={{
      width:'100%',
      height:"100%"
    }}
    >
      {
        !visible? <View
        style={{
          width:'100%',
          height:"100%"
        }}
        > <ImageBackground
        source={{uri:"https://images.unsplash.com/photo-1556742031-c6961e8560b0?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&dl=clay-banks-tgquMvhNLc4-unsplash.jpg"}}
        style={{width:"100%",height:"90%",zIndex:999,justifyContent:"center",alignItems:"center"}}

       /> <TouchableOpacity
          onPress={() => setVisible(true)}
          style={{
            backgroundColor:"white",
            justifyContent:"center",
            alignItems:"center",
            padding:10,height:"10%"
          }}
          >
            <Text>Show Webview</Text>
          </TouchableOpacity>  </View> : 
        <View
        style={{
          flex:1
        }}
        >
           <TouchableOpacity
          onPress={() => setVisible(false)}
          style={{
            backgroundColor:"red",
            padding:10,
            justifyContent:'center',
            alignItems:'center',
            width:"100%"
          }}
          >
            <Text style={{color:'white'}} >Hide Webview</Text>
          </TouchableOpacity>
           <WebView 
    scalesPageToFit
      originWhitelist={["*"]} 
      source={{ uri:"https://www.google.com"

     }}/>

        </View>

      }







    </View>
  );
};



export default App;

import React，{useState}来自“React”；
进口{
看法
图像背景，
可触摸不透明度，
文本，
状态栏，
}从“反应本机”；
从“react native WebView”导入WebView；
常量应用=（）=>{
const[visible，showWebview]=useState（false）
常量setVisible=（可见）=>{
showWebview（可见）；
}
返回(
{
！可见？设置可见（真）}
风格={{
背景颜色：“白色”，
辩护内容：“中心”，
对齐项目：“中心”，
填充：10，高度：10%
}}
>
显示网络视图
: 
setVisible（false）}
风格={{
背景颜色：“红色”，
填充：10，
辩护内容：'中心'，
对齐项目：'中心'，
宽度：“100%”
}}
>
隐藏网络视图
}
);
};
导出默认应用程序；

您好，非常感谢您的帮助，但是我可以将我的图像放在哪里？在您的代码源={require（“./tests//image.jpg”）}上，我现在不会将@ammarahmed放入您的projectname/src/assets/images/中，然后添加其相对于放置上述代码的文件位置的路径。请重试上述代码。我已经更改了在线图像的路径，感谢它的工作！，你们真的很好，非常感谢，但我怎么能把我的按钮放在图片的底部，而不是图片的内部呢？