标签: react-navigation

有没有办法告诉 react-navigation 库我不想在我的应用程序的所有屏幕中使用标题？

不是在每个屏幕中设置 navigationOptions = { header: null, } ，是否有一些导航器级别的设置我可以只设置一次？

我试图让一个按钮出现在headerRightReact 导航屏幕的标题栏中，但我似乎无法让它工作。

我希望开始按钮（在 中的内容headerRight）何时显示props.players.length > 1。

任何人都可以指出我正确的方向吗？

我有两个屏幕，想将状态从一个传递到另一个。

简化屏幕 1：

import React, { Component } from 'react';
import { View, TextInput} from 'react-native';
import { buttons } from '../../components/buttons/Buttons';

export default class LoginScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
    }
  }

  render() {
    return(
      <View>
       ...
        <TextInput onChange={(input) => this.setState({username: input})}></TextInput>
        ...
        <Button.main onPress={() => this.props.navigation.navigate('Register', {username: this.state.username})} title='Create Account'/>
      </View>
    )
  }
}

现在，如果我按下按钮，我想转到this.state.username新屏幕。如果我不使用onChange={(input) => this.setState({username: input})}并手动设置用户名的值，如下所示：

this.state = {
    username: 'Test',
}

该值毫无问题地通过，我可以从新屏幕访问它。但是当我尝试在更改this.state.username时TextInput …

使用 react-navigations - createBottomTabNavigator，我试图将图标向下推一点，但它被切断了，我不确定为什么。

有没有办法解决这个问题？或者如果你能指导我获得一些关于这方面的信息。

图标样式如下：

<Icon
   name="heart"
   color={tintColor}
   size={28}
   style={{ marginTop: '20' }}
 />

这是标签栏选项：

 tabBarOptions: {
    showLabel: false,
    activeTintColor: '#e91e63',
    indicatorStyle: {
        height: 100
    },
    style: {
        position: 'absolute',
        backgroundColor: 'transparent',
        height: 50,
        width: DEVICE_WIDTH * 0.94,
        borderTopColor: 'transparent',
        borderBottomLeftRadius: 33,
        borderBottomRightRadius: 33,
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
        bottom: 0,
        margin: 10,
        shadowColor: '#000000',
        shadowOffset: {
          width: 0,
          height: 0.3
        },
        shadowRadius: 5,
        shadowOpacity: 0.1

    },

    tabStyle: {}
}

提前谢谢了

我遇到了一个问题，我基本上没有关于如何继续前进的想法。

我有一个带有两个屏幕的 StackNavigator，一个称为“HomeScreen”，另一个称为“SettingsScreen”。当我点击一个按钮时，我会进入“SettingsScreen”。

我还有一个 DrawerNavigator，我可以使用它导航到四个屏幕之一，屏幕 4 是 StackNavigator。

DrawerNavigator:
  Screen1
  Screen2
  Screen3
  Screen4
    - HomeScreen
    - SettingsScreen

（希望它以某种方式可以理解）

所以让我们来解决这个问题......
我的问题是我的“SettingsScreen”具有将项目添加到 AsyncStorage 键的功能（它将它推送到数组，所以最后我有一个列表，我在我的“主屏幕”上呈现)，但是当我添加了该项目并返回到我的“主屏幕”时，它不会重新加载页面。我怎样才能让它在满足某些条件甚至更简单时重新加载页面 - 每次离开“SettingsScreen”时如何重新加载页面？

我必须componentDidMount在屏幕 A 中列出一组文件（图像），从此屏幕 AI 有另一个屏幕 B 链接，我可以在其中查看文件的详细视图，并且可以选择删除文档。

当使用调用屏幕 A 时

  <TouchableOpacity style={Styles.HomeButton} onPress={ () => this.props.navigation.navigate('Gallery')}>
     <Text style={Styles.HomeButtonText}>View Photos</Text>
  </TouchableOpacity>

componentDidMount 工作正常，但是当我在取消链接回调中删除文件（我正在使用 react-native-fs）时，我正在调用导航

this.props.navigation.navigate('Gallery');

重定向到屏幕 A 工作正常，但componentDidMount无法正常工作，这意味着我仍然可以在列表中看到已删除的文件。即屏幕 A 不刷新，有什么可能的解决方案吗？

尝试使用 react-navigation 在 React Native 的许多屏幕上实现“无互联网”通知。我试图避免将组件添加到所有屏幕视图渲染功能，因为它感觉像样板。

有没有一种简单的方法可以使用 react native 导航在一个地方添加一个组件并让它在所有屏幕上持久化？

我有更新密码功能ScreenPassword，但我想通过点击屏幕标题上的保存按钮来更新密码。

导航设置.js

const routeConfigs = {
    Password: {
        screen: ScreenPassword,
        navigationOptions: {
            headerTitle: 'Password',
            headerTintColor: '#000',
            headerRight: (
                <View style={styles.headerRight}>
                    <Button
                        style={styles.buttonHeader}
                        color='#000'
                        title="Save"
                        onPress={???????????} />
                </View>
            )
        }
    }
}

export default createStackNavigator(routeConfigs);

屏幕密码

export default class ScreenPassword extends Component {
    updatePassword = () => {

    }
    render() {
        return (
            <ScrollView style={styles.container}>
                <View style={styles.boxForm}>
                    <TextInput
                        style={styles.textInput}
                        placeholder="Old Password"
                        secureTextEntry='true'
                    />
                    <TextInput
                        style={styles.textInput}
                        placeholder="New Password"
                        secureTextEntry='true'
                    />
                    <TextInput
                        style={styles.textInput}
                        placeholder="Confirm Password"
                        secureTextEntry='true'
                    />
                </View>
            </ScrollView>
        )
    } …

所以我使用React Navigation 3.0 和 React Native。使用标题时，标题标题在 iOS 上默认居中，但在 Android 上左对齐。我使用了一个修复程序来将 Android 的标题标题居中，这很好。当显示后退按钮时，标题标题会被向右推一点。无论哪种方式，我都希望标题保持居中。

所以我尝试给出HeaderLeftContainerStyle一个绝对样式，这样它就不会影响标题的位置，但它没有按预期工作。

有什么建议吗？

下面是一些代码的样子：

const MainCommsStack = createStackNavigator(
  {
    ShowMessages: {
      screen: connect(
        mapStateToProps,
        mapDispatchToProps,
      )(MessageScreen),
    },
    ChatWindow: DetailStack,
  },
  {
    defaultNavigationOptions: {
      headerTitle: 'COMMS',
      headerTitleStyle: [
        baseStyles.whiteHeaderText,
        {
          alignSelf: 'center',
          textAlign: 'center',
          justifyContent: 'center',
          flex: 1,
          textAlignVertical: 'center',
        },
      ],
      headerStyle: {
        backgroundColor: colors.vGreen,
      },
      headerBackImage: <BackButton />,
      headerBackTitle: null,
      headerLeftContainerStyle: {
        position: 'absolute',
        left: 10,
      },
      headerLayoutPreset: 'center',
    },
  },
);
const CommsStack = …

如何将菜单点定位在屏幕的下边缘？最好的解决方案是，如果您可以简单地更改每个元素的导航选项的样式。

这是我的应用程序导航器：

    const AppNavigator = createDrawerNavigator(
      {
        Einkaufsliste: {
          screen: MainScreen,
          navigationOptions: {
            drawerIcon: <Icon name="shopping-cart" />
          }
        },
        Bearbeiten: {
          screen: BasketEditScreen,
          navigationOptions: {
            drawerIcon: <Icon name="edit" />
          }
        }
      },

      {
        contentComponent: CustomDrawerComponent
      }
    );

谢谢！