小编hel*_*eer的帖子

这是我简单的render()函数category list page.

最近我为我的FlatListView 添加了分页,所以当用户滚动到底部时,onEndReached在某个点(onEndReachedThreshold从底部开始的值长度)中调用,它将获取下一个categories并连接类别props.

但我的问题是在调用render()时调用 onEndReached.换句话说,FlatList onEndReached在它到达底部之前被触发.

我错了价值onEndReachedThreshold?你看到有什么问题吗？

return (
  <View style={{ flex:1 }}>
    <FlatList
      data={this.props.categories}
      renderItem={this._renderItem}
      keyExtractor={this._keyExtractor}
      numColumns={2}
      style={{flex: 1, flexDirection: 'row'}}
      contentContainerStyle={{justifyContent: 'center'}}
      refreshControl={
        <RefreshControl
          refreshing = {this.state.refreshing}
          onRefresh = {()=>this._onRefresh()}
        />
      }
      // curent value for debug is 0.5
      onEndReachedThreshold={0.5} // Tried 0, 0.01, 0.1, 0.7, 50, 100, 700

      onEndReached = {({distanceFromEnd})=>{ // problem
        console.log(distanceFromEnd) // 607, 878 
        console.log('reached'); // once, and …

我正在构建"从照片标记"功能.

1. 当用户移动或捏住图像上的方块时,
2. PanResponder改变x坐标(左),y坐标(顶部),方形长度(thumbSize)的状态
3. 有了数据,我想显示方形实时的部分

因此,下面的图像应放在A,All All的左侧,如上图所示.

这是呈现"裁剪"图像的渲染部分.

console.log(left) // 80
console.log(top) // 200
console.log(thumbSize) // 150
<Image
      source={{uri: image}}
      style={{height:70, width: 70, bottom: (-top), right: (-left)
      }} <- style is not complete. I'm putting some example code
/>

这是一个持续存在的问题:如何显示图像的唯一部分.

它有效,但解决方案不符合我的期望.

• 它没有改变宽度和高度(我想修复图像从每个宽度和高度的'宽度'到'70'调整大小)
• 它打破了整个风格(A,All,All things disappear)

我一直试图解决这个问题好几天但找不到确切的方法.

更新:我几乎解决了它,但重新调整问题

我换Image到CroppedImage(新组件)

<CroppedImage
      source={{uri: image}}
      cropTop={top}
      cropLeft={left}
      cropWidth={thumbSize}
      cropHeight={thumbSize}
      width={width(100)}
      height={width(100)}
      resizeMode="contain" />

这是 CroppedImage

return (
  <View style={[{
    overflow: 'hidden',
    height: this.props.cropHeight,
    width: this.props.cropWidth,
    backgroundColor: 'transparent'
    }, …

我刚刚发现ScrollView没有永久的滚动条.我浏览了所有文档和谷歌,但我不认为它确实存在.

我们如何实现永久滚动条<ScrollView>？我们如何保持滚动条可见？

默认情况下,RetrieveAPIView或RetrieveUpdateAPIView需要lookup_field检索Model.

但是在我的情况下,我想通过self.request.user检索我的模型.

这是views.py示例

class ProfileRetrieveAndUpdateProfile(generics.RetrieveUpdateAPIView):
    queryset = Profile.objects.all()
    serializer_class = ProfileRetrieveAndUpdateSerializer
    lookup_field = 'user_id'

    def get_queryset(self):
        qs = Profile.objects.all()
        logged_in_user_profile = qs.filter(user=self.request.user)
        return logged_in_user_profile

我可以在没有lookup_field的情况下使用RetrieveAPIView 吗？

删除用户令牌后,用户会重定向到登录页面.但是,如果我与其他用户登录,主页面仍会显示以前的用户信息.

这是因为我没有刷新主页面.如何在反应导航中手动重新初始化(？)主页？

MainPage(Logged in as 'matt') -> Logout -> LoginPage 
-> (here I want to refresh MainPage so it can be loaded once new user login) 
-> MainPage(Should be logged in as other user 'kobe')

MainPage通过componentWillMount接收用户JSON数据

  componentWillMount() {
    // retrieve user data 
    this.props.retrieveCurrentUser(this.props.token);
  }

以防您需要我的代码......

1)这是Root导航

const RootTabNavigator = TabNavigator ({
    Auth: {
      screen: AuthStackNavigator,
    },
    Welcome: {
      screen: WelcomeScreen,
    },
    Main: {
      screen: MainTabNavigator,
    },
  }, {

2)这是Auth Stack Navigator(登录页面)

export default StackNavigator ({
  Autho: {
    screen: AuthScreen,
  }, …

如何在StackNavigator中更改动画的方向？

当前行为

当用户转到另一个屏幕时,屏幕从下到上飞行.

预期的行为

当用户转到另一个屏幕时,屏幕从右向左飞行.(像Facebook或Instagram!)

StackNavigator代码

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
    ...
}, {
    navigationOptions: ({navigation, screenProps}) => ({
        tabBarOnPress: blahblaj
    }),
    lazy: true
    // I guess we can do something here
});

• 如果我们可以设置动画时间,它会更好!目前看起来屏幕从屏幕中间飞到顶部.我想要像Facebook或Instagram这样的自然动画:)

提前致谢,

错误：

类型“A”上不存在属性“ref”。ts(2339)

这是我的源代码

export default class A extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);

    this.ref = React.createRef(); << ERROR HERE

如何定义类型A来解决错误？

我正在使用 FlatList 在屏幕上渲染多个图像。我想在 item.img 为空时渲染占位符图像（项目是从react-redux中获取的）。

问题：

1. 我想使用“require”来使用占位符图像。它使用单花括号。<Image source={ require('../assets/images/robot-prod.png') } style={styles.palceholderImage}/>。而正常的图像渲染使用两个大括号{{uri: item.img}}。

2. 我应该内联运if(item.img)算符吗？

这是 _renderItem 函数。

 _renderItem = ({item}) => {
    let imgUrl = item.img;

    return (
      <TouchableWithoutFeedback
        onPress={() => this._handleCategoryPress(item.id)}>
        <Image
          key={item.id}
          source={{uri: item.img}}
          style={styles.rowImage}
          resizeMode="cover"
        />
      </TouchableWithoutFeedback>
    );
  }

这是 API 响应

[
    {
        "id": 1,
        "name": "Gym",
        "image": "www.aws.blahblahblah"
    },
    {
        "id": 2,
        "name": "School",
        "image": null
    },
    {
        "id": 3,
        "name": "hollymo",
        "image": "www.aws.blahblahblah"
    },

谢谢

我正在建立类似于Facebook或instagram的搜索页面。基本上，如果我们按下搜索按钮，它将导航到“ SearchScreen”。当安装了它的组件时，我要设置搜索头为焦点（光标）。

我的问题是当我将TextInput设置ref为prop时。而且我Stateless function components cannot have refs出错了。这是正确的方法吗？为什么不起作用？除此以外，您知道其他更好的方法吗？

我在FlatList的renderHeader道具中添加了_renderHeader私有函数。这是_renderHeader

  _renderHeader = () => {
    return (
      <View style={styles.layoutheader}>
        <View style={styles.containerheader}>
          <RkTextInput
            rkType='row'
            ref="sbar"  /////////////////////HERE////////////
            autoCapitalize='none'
            autoCorrect={false}
            label={<RkText rkType='awesome' style={{color:'white'}}>{FontAwesome.search}</RkText>}
            placeholder='Search'
            underlineWidth="1"
            underlineColor="white"
            style={styles.searchBarheader}
            inputStyle={{color:'white'}}
            labelStyle={{marginRight:0}}
            value={this.state.inputText}
            onChangeText={(inputText)=>{this.setState({inputText})}}
          />
          <View style={styles.left}>
            <RkButton
              rkType='clear'
              style={styles.menuheader}
              onPress={() => {
                this.props.navigation.goBack()
              }}>
              <RkText style={styles.titleText} rkType='awesome hero'>{FontAwesome.chevronLeft}</RkText>
            </RkButton>
          </View>
        </View>
      </View>
    )
  }

componentDidMount() {
    this.refs.sbar.focus(); ////////// Here I want to focus RkTextInput when it's loaded
}

这里的更新是请求的实际代码

class …