在React Native中，如何水平翻转视图？
在React Native中，可以使用transform属性来实现视图的水平翻转。具体步骤如下：
- 首先，确保你已经安装了React Native的开发环境并创建了一个React Native项目。
- 在需要进行水平翻转的视图组件上，添加
style属性，并在其中设置transform属性。 - 在
transform属性中，使用scaleX(-1)来实现水平翻转效果。例如：
import React from 'react';
import { View } from 'react-native';
const App = () => {
return (
<View style={{ transform: [{ scaleX: -1 }] }}>
{/* 视图内容 */}
</View>
);
};
export default App;通过设置scaleX(-1)，视图组件将水平翻转。
需要注意的是，这种水平翻转只会影响视图的显示，不会改变视图的布局。如果需要同时改变布局，可以使用flexDirection: 'row-reverse'来实现。
推荐的腾讯云相关产品：腾讯云移动开发平台（https://cloud.tencent.com/product/mpp）
相关·内容
考虑以下示例：
import * as React from 'react';
import { Text, View, StyleSheet, Image, TouchableOpacity} from 'react-native';
import snackicon from './assets/snack-icon.png';
export default function App() {
return (
<>
{/*<TouchableOpacity onPress={() => cons
浏览 11提问于2020-06-03得票数 0
回答已采纳
我是一个反应初学者-本地人，我试图创建一个包含图像和按钮的视图。
welcomepage.js
import React,{Component} from 'react';
import { View,Image,StyleSheet } from 'react-native';
import { Card,Button,Avatar } from 'react-native-elements';
export default class WelcomePage extends Component {
render() {
浏览 3提问于2018-04-07得票数 1
回答已采纳
1回答
我用的是带有Flexbox的本机路由器。我想展示的是，FlatList最终占据了全屏和粘性页脚。我试图为FlatList指定flexGrow: 1，为视图页脚指定flexShrink: 0，但它不起作用。我正在构建世博应用程序，并在iPhone上查看结果。
import React, {Component} from 'react';
import {
Text,
View,
FlatList,
} from 'react-native'
import {Provider} from 'react-redux'
import {Nat
浏览 0提问于2018-05-17得票数 1
回答已采纳
App.js
import React,{ Component } from 'react';
import { StyleSheet,TextInput, View, Button, Text } from 'react-native';
import Toast from 'react-native-simple-toast';
import TextItem from '.src/Components/Textviews/TextViewDisplay';
export default class App extends
浏览 0提问于2019-08-26得票数 0
回答已采纳
我正在开发一个react本机应用程序，我处理的是Modal和可压缩组件，事实上，我遇到的问题不是一个错误或错误，而是我试图在屏幕的最右边放置一个可按的文本，但是我正在努力设计一些样式，如果有人能在这方面给予我帮助，我会非常感激的。这是我为弹出表单组件编写的代码：
import React from 'react';
import {View, Text, Modal, StyleSheet, Pressable, Alert} from 'react-native';
const PopUpModal = ({visible, onPress})=&g
浏览 3提问于2022-05-18得票数 0
1回答
本机反应:未覆盖父级高度的视图
、、、、
问题
有2个选项卡水平堆叠，在第一个选项卡中，当两个选项卡中的内容不同时，绿色视图无法填充父选项卡的高度。
世博会可复制性
代码
import React from "react";
import { Text, View } from "react-native";
const Tab = ({ textNodes }) => {
return (
<View style={{ flex: 1, backgroundColor: "red" }}>
<View style={{ fl
浏览 2提问于2021-10-28得票数 0
2回答
我从看到了反应本地提供的嵌套垂直滚动视图
问题是，它似乎不适用于安卓系统上嵌套的水平ScrollViews。有关示例，请参阅此代码：
import React from 'react';
import _ from 'lodash';
import { View, ScrollView, StyleSheet, Text, SafeAreaView } from 'react-native';
export default class App extends React.PureComponent {
render() {
ret
浏览 2提问于2019-08-31得票数 1
回答已采纳
2回答
我正在尝试设计这个设计react-native。这是我为这个编码的，但这不是我想要的。这只在一个屏幕上工作，如果我改变屏幕大小，那么事情就不能工作了。
这看起来像绝对布局。我应该做什么改变，使它以这样的方式，以便它将工作在所有的屏幕大小。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from "react";
import {
AppRegistry,
Image,
View,
浏览 2提问于2017-04-14得票数 5
回答已采纳
1回答
找不到变量: setState
、、、、
我正在尝试制作一个切换按钮，当点击时改变图标和图标的颜色，我遵循了一个教程，但遇到了这个问题。
我试着改变周围的东西，弄乱它，但我总是得到相同的错误：“无法找到变量: setState”
导致问题的代码：
import { View, Text, StyleSheet ,Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { Caption } from "react-native-pap
浏览 23提问于2021-02-20得票数 0
回答已采纳
我对React Native (老实说，一般是React/Javascript )非常陌生，并且非常困惑。我有一个家务活跟踪应用程序，它使用Flatlist呈现一个家务活列表，然后可以使用React Native手势处理器Swipeable来刷/勾选。
我希望在杂务列表上方有一个标签，显示已完成的杂务总数(占位符当前显示"?？杂务已完成“)。我知道这需要找到1)有多少我的ChoreListItems是从Flatlist组件呈现的，然后2)有多少项的状态是"isComplete“。我有几个嵌套的/可重用的组件，因为这个屏幕有几个版本(洗衣房、厨房、浴室等)。我知道这让我更加困惑。
浏览 30提问于2021-03-01得票数 0
我正在学习react-native编程，我的下面的程序工作良好，如果我删除按钮，当我添加按钮时，它会给出一个错误。
import React from 'react';
import {
registerComponent,
} from 'react-native-playground';
import {
StatusBar,
StyleSheet,
Text,
View,
TextInput,
Alert,
Button
} from 'react-native';
class TextInputDemo
浏览 1提问于2016-12-14得票数 0
我是react的初学者，我正在尝试从一个文件到另一个文件赋予样式值。
这是Square.js：
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Numbers from './Numbers';
export default class Square extends React.Component {
render() {
return (
<View style={squa
浏览 0提问于2018-10-17得票数 0
1回答
我是个新手。我正在使用React制作一个YouTube克隆，我的项目中我尝试通过使用定制的谷歌字体，我也在效仿他们。我使用npx expo install @expo-google-fonts/balsamiq-sans安装了“balsamiq”字体。进口的App.js和它的工作！但是，当我尝试在Header.js (组件)中使用它时，它不起作用。字体不会改变。以下是我所做的- App.js文件
import { StyleSheet, Text, View } from 'react-native';
import Home from './src/screens/H
浏览 11提问于2022-10-08得票数 0
2回答
我使用React-Navigation和StackNavigator实现了一个导航栏，位于我的react本地应用程序的顶部，它以应用程序徽标为中心，在右边有一个菜单按钮。我不能让它占用标题容器的全部空间，但是左边总是有一个20 on的空白。
正如您在我的代码中所看到的，我已经将各种样式属性(如margin: 0、padding: 0、alignment: fill和width:100% )应用于headerStyle、headerContainerStyle和导航栏组件本身，但它们都没有起到任何作用。
App.js:
import React from 'react';
imp
浏览 1提问于2020-12-01得票数 3
回答已采纳
import React from 'react';
import { StyleSheet, Text, View,TouchableOpacity, AppRegistry} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Login from './screens/Login';
export default class App extends React.Component {
/*
stat
浏览 1提问于2018-01-08得票数 0
错误:元素类型无效:期望字符串(用于内置组件)或类/函数(用于组合组件)，但获得: number。
检查SignInScreen的呈现方法。
import React from 'react';
import {
SafeAreaView,
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import
浏览 11提问于2022-05-20得票数 1
2回答
我试着做一个反应本土化的游戏。我想在游戏屏幕上呈现200+视图。每个视图都具有可按下的功能。每当我按下View，我就需要运行一个函数，它将改变View背景颜色并更新游戏上下文中的分数。但是，每当我试图按下任何视图，就需要一些时间来更改背景和更新上下文。
Note
我正在使用世博会作为一个开发环境，我也在使用一个真正的设备。
我的视图组件
import { useEffect, useState, memo } from "react";
import { useContext } from "react";
import { gameContext } from
浏览 3提问于2022-08-14得票数 1
回答已采纳
在我的React中，屏幕顶部有一个TextInput和一个TouchableOpacity组件，由于某些原因不能单击。在我做这个项目时，它在某个时候起了作用，但由于某些原因，它不再识别单击或关键事件。构成部分如下：
import React, { Component } from "react";
import {
AsyncStorage,
Dimensions,
FlatList,
Platform,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View
} from "react-native";
imp
浏览 0提问于2018-04-01得票数 2
1回答
我正在创建一个React中的ViewContainer，它只是作为一个一般背景，然后想要在其中放置一个文本组件。然而，文本并不是这样出现的。但是，当我将文本放置在ViewContainer的创建中时，它确实会出现。我希望ViewComponent是可泛化的，并且不希望它绑定到特定的文本中。
ViewContainer.js：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
export default
浏览 0提问于2019-07-25得票数 1
回答已采纳
1回答
我是新的反应-本机和移动应用程序开发在一般情况下，我试图为我的应用程序创建一个标题，其中有一个文本和按钮。
这是我的代码：
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default class App extends React.Component {
_leaveSheet() {
}
render() {
return (
浏览 2提问于2017-11-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
