小编Jus*_*ede的帖子

我试图做到这一点：我希望第一张图片上有文字，但之后我不希望有文字。我评论的所有内容都是我最初的做法，但已更改以便你们可以查看。请注意这一点，因为它可能会改变我收到的见解。现在我根本没有显示文本。

此外，如果那里的旋转木马增加了太多的注意力，我可以将其删除。

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  ScrollView,
  Dimensions,
  ImageBackground,
} from 'react-native';
import Constants from 'expo-constants';

const { width } = Dimensions.get('window');
const height = width * 0.6;

const images = [
  'https://images.pexels.com/photos/2249602/pexels-photo-2249602.jpeg?cs=srgb&dl=pexels-sergio-souza-2249602.jpg&fm=jpg',
  'https://images.pexels.com/photos/3178881/pexels-photo-3178881.jpeg?cs=srgb&dl=pexels-andrew-neel-3178881.jpg&fm=jpg',
  'https://images.pexels.com/photos/4946412/pexels-photo-4946412.jpeg?cs=srgb&dl=pexels-maria-orlova-4946412.jpg&fm=jpg',
  'https://images.pexels.com/photos/4911060/pexels-photo-4911060.jpeg?cs=srgb&dl=pexels-cottonbro-4911060.jpg&fm=jpg',
];

//this is the array I noramlly use. 
//const images = [
//   {id : "1", uri: require('../../assets/placeholder1.jpg'), text: "Test"},
//   {id : "2", uri: require('../../assets/placeholder2.jpg'), /*text: "Test"*/},
//   {id : "3", uri: require('../../assets/placeholder3.jpg'), /*text: "Test"*/}, …

我试图弄清楚提升状态是如何工作的。目前，我正在尝试在不同的组件中使用 onPress 来更改状态。在我下面提供的小吃演示中，ListHome由于MapHome某种原因没有做出回应，但您仍然会看到我正在努力完成的任务。

我希望地图和列表“按钮”能够完成“单击此操作”的功能。

演示- 当前实现没有错误，只是除了可触摸不透明度的闪烁之外没有任何响应。（另请记住，由于某种原因，零食没有响应。我的本地设备工作正常）

编辑：所以要清楚，我希望能够whichComponentToShow从另一个组件访问和更改状态。即ListHome组件。

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true,
      whichComponentToShow: 'Screen1',
    };
  }

  goToMap = () => {
    this.setState({ whichComponentToShow: 'Screen2' });
  };

  render(){
    if(this.state.whichComponentToShow === 'Screen1'){
      return(
       <View style={{backgroundColor: '#d1cfcf' ,flex: 1}}>
        
        <ListHome
          renderMap = {this.goToMap.bind(this)}
        />
  }
}

export default class ListHome extends React.Component {
  
goToMap = () => {
  this.props.renderMap();
}

<TouchableOpacity onPress={() => this.goToMap.bind(this)}> …

对于 IOS 应用程序，我有一个在选项卡导航器中调用的堆栈。我正在尝试从底部选项卡屏幕导航到堆栈中的屏幕，但出现以下错误。

undefined 不是一个对象（评估 '_this.props.navigation.navigate'）

我想在所有屏幕上渲染底部选项卡。我注意到这会在其他地方导致 goBack() 出现一些有趣的问题。

如何从底部选项卡屏幕导航到堆栈屏幕？

目前的实施是一种不好的做法吗？

我提供了这个演示以及下面的代码。我认为这与道具传递有关。

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (

     <Stack.Navigator
     initialRouteName="Home">        
      <Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
      <Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/> 
    </Stack.Navigator>
);

);
}

export default function App() {

  return (
  <NavigationContainer>
    <Tab.Navigator
    initialRouteName="Home"
    screenOptions={{
      tabBarActiveTintColor: '#F60081',
      tabBarInactiveTintColor: '#4d4d4d',
      tabBarStyle: {
        backgroundColor: '#d1cfcf',
        borderTopColor: 'transparent',
      },
    }} 
  >
    <Tab.Screen
      name="Home"
      component={MyTabs}
      options={{
        tabBarLabel: 'Home',
        headerShown: false,
        tabBarIcon: ({ color, size }) => ( …

我有一个导航容器，可以调用堆栈中的函数。我想从堆栈屏幕导航到选项卡屏幕并更改该选项卡屏幕中的状态。我在下面给出了一些代码和演示。在演示中，您可以在 screen3（堆栈屏幕）上看到我正在尝试导航到 Home（选项卡屏幕）并更改状态，以便它呈现 MapHome 屏幕。

我不确定如何将状态传递到底部选项卡屏幕而不将其渲染到其他地方。我比你更欣赏任何见解。

这是我的演示以及 App.js 下面的一些代码。您必须在 IOS 或 Android 中运行该演示，它不适用于 Web。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import Home from './Home'
import ListHome from './screens/screen1'
import MapHome from './screens/screen2'
import Screen3 from './screens/screen3'

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (

    <Stack.Navigator
     initialRouteName="Home">        
      <Stack.Screen name="Home" component= …

所以我使用 React 原生大小很重要，直到现在它都运行得非常完美。我无法让这两个箭头相匹配。现在我在 android 上排列了它，但是当我在 iphone 上排列它们时，android 变得更奇怪了。

我一直在使用 paddingLeft 并离开尝试完成这项工作。我试图正确使用：但这并没有真正起作用。我正在尝试完成诸如 flex rtl 之类的事情，以便比例可能更容易从屏幕右侧而不是左侧的不同距离工作？我不确定最好的方法来解决这个问题。

就像我说的，当我为 iphone 排列它时，差异要大得多。感谢您的任何见解！

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';

export default function HomeScreen() {
  return (
    <LinearGradient
      colors={['#272933', '#272933', '#272933']}
      style={styles.container}>

     {/* Beginning of Click for Accoutn Settings */}
    <TouchableOpacity>
     <View style={{flexDirection: 'row', top: scale(150)}}>
        <View style …

我设置了一个新的放大、添加了身份验证和确认后 lambda 函数，以将用户数据移至 DynamoDB。当我运行 NPM start 时，出现以下错误：

无法构造变压器：DuplicateError：重复的文件或模拟。请检查控制台以获取更多信息 setModule (\MyDemo\node_modules\jest-haste-map\build\index.js:543:17) .js:426:22 {

mockPath1: 'amplify#current-cloud-backend\function\FreshAuthPostConfirmation\src\package.json',

mockPath2: 'amplify\backend\function\FreshAuthPostConfirmation\src\package.json' } '''

根据我所读到的内容，#current-cloud-backend 是由 amplify 根据后端文件夹中的文件创建的。看起来 package.json 应该在那里，但我不确定为什么它是一个错误。我在某处看到我应该删除子类重复文件，我认为它是 #current-cloud-backend 中的文件，但是每次我推送它时 amplify 都会继续产生此错误，我如何避免这种情况到底发生了什么？

据我所知，如果我将第二页设为选项卡，则底部选项卡将呈现。虽然，我不想将其作为单独的选项卡，但我只是希望底部选项卡能够在所有屏幕上呈现。

我在这里做了一个这个小吃的复制品

另外，为什么当我将其设置为 false 时会显示标题？

我试图每隔 x 秒记录一次用户位置。在这个特定的代码中，它是5秒。我正在使用 watchPositionAsync。我认为下面的代码会每 5 秒记录一次纬度和经度，但它根本不会在控制台中记录任何内容。

我想确保它正在更新并将其记录在控制台中可以确认这一点。如果您有任何疑问或需要查看更多代码，请告诉我。

世博地点文档：https://docs.expo.dev/versions/latest/sdk/location/

import * as Location from 'expo-location';

function MyTabs() {

  const [latitude, setLatitude] = React.useState(null);
  const [longitude, setLongitude] = React.useState(null);
  

React.useEffect(() => {
    
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        permissionAlert();
        return;
      }

      let location = await Location.watchPositionAsync({
        accuracy: Location.Accuracy.High,
        timeInterval: 5000,
        distanceInterval: 50
        
      },
        console.log('update location!', location.coords.latitude, location.coords.longitude)
      );
      setLatitude(location.coords.latitude)
      setLongitude(location.coords.longitude);

    })();
  }, []);